Skip to content

Instantly share code, notes, and snippets.

@calebporzio

calebporzio/twitter_clone_tailwind2.html

Last active November 22, 2023 22:48
Show Gist options
  • Save calebporzio/f99bfc0b28ddca7cf1b9260722a0ed9b to your computer and use it in GitHub Desktop.
Save calebporzio/f99bfc0b28ddca7cf1b9260722a0ed9b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
twitter_clone_tailwind2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<title>Twitter Clone</title>
</head>
<body class="antialiased bg-cool-gray-100 font-sans leading-tight text-black">
<!-- Top Bar -->
<div class="bg-white h-12 border-b"></div>
<!-- Main Body -->
<div class="container m-auto pt-4">
<div class="flex">
<!-- Left Sidebar -->
<div class="px-2 w-1/4">
<div class="bg-white mb-4 h-48"></div>
<div class="bg-white h-128"></div>
</div>
<!-- Center Content -->
<div class="px-2 w-1/2">
<div>
<!-- Compose Tweet -->
<div class="bg-white flex p-4 border-b">
<div class="pr-4">
<div class="overflow-hidden rounded-full bg-grey h-12 w-12">
<img src="https://pbs.twimg.com/profile_images/1028341670352322561/Ik2S27KT_400x400.jpg">
</div>
</div>
<div class="w-full">
<textarea
class="outline-none block rounded-lg border-2 border-blue-lighter w-full p-2"
placeholder="What's happening?"
rows="4"
></textarea>
<div class="flex justify-between items-center">
<div class="text-red-500 pt-1">Some Error</div>
<div>139</div>
</div>
<div class="flex pt-4 justify-between">
<div class="flex">
<div class="mr-4 rounded-lg bg-blue-100 h-8 w-8"></div>
<div class="mr-4 rounded-lg bg-blue-100 h-8 w-8"></div>
<div class="mr-4 rounded-lg bg-blue-100 h-8 w-8"></div>
<div class="mr-4 rounded-lg bg-blue-100 h-8 w-8"></div>
</div>
<div>
<button class="bg-blue-400 hover:bg-blue-500 font-black px-4 py-2 rounded-full text-white tracking-tight">
Tweet
</button>
</div>
</div>
</div>
</div>
<!-- Loading Indicator -->
<!-- <div class="py-4 text-5xl text-center">
<i class="fa fa-spinner fa-spin text-cool-gray-400"></i>
</div> -->
<!-- Timeline -->
<div>
<a href="#" class="flex p-4 border-b bg-white hover:bg-cool-gray-50 text-black no-underline">
<div class="pr-4">
<div class="overflow-hidden rounded-full h-12 w-12">
<img src="https://pbs.twimg.com/profile_images/1028341670352322561/Ik2S27KT_400x400.jpg">
</div>
</div>
<div>
<div class="mb-1">
<span class="font-bold">Caleb Porzio</span> <span class="text-grey-dark">&#64;calebporzio</span>
</div>
<div class="mb-4">The Tweet</div>
<div class="flex">
<div class="mr-12 rounded-lg border-2 border-grey-lighter h-6 w-6"></div>
<div class="mr-12 rounded-lg border-2 border-grey-lighter h-6 w-6"></div>
<div class="mr-12 rounded-lg border-2 border-grey-lighter h-6 w-6"></div>
<div class="mr-12 rounded-lg border-2 border-grey-lighter h-6 w-6"></div>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- Right Sidebar -->
<div class="px-2 w-1/4">
<div class="bg-white mb-4 h-64"></div>
<div class="bg-white h-48"></div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment