Skip to content

Instantly share code, notes, and snippets.

@Radostin

Radostin/twitter.html

Created November 6, 2017 20:25
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save Radostin/ee1e6bd890621b15d57d550d49bbe762 to your computer and use it in GitHub Desktop.
Save Radostin/ee1e6bd890621b15d57d550d49bbe762 to your computer and use it in GitHub Desktop.
Download ZIP
Twitter Mockup with TailwindCSS
Raw
twitter.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Twitter</title>
<link rel="stylesheet" type="text/css" href="./css/tailwind.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="font-sans bg-grey-light text-black"></body>
<nav class="bg-white h-12 pin-t border-b shadow">
<div class="container mx-auto">
<div class="flex">
<div class="w-2/5 py-4">
<a class="text-blue-light border-b-4 border-blue-light pb-3 mr-4" href="#">
<i class="fa fa-home fa-lg"></i> Home
</a>
<a class="mr-4" href="#">
<i class="fa fa-bell"></i> Notifications
</a>
<a class="" href="#">
<i class="fa fa-envelope"></i> Messages
</a>
</div>
<div class="w-1/2 py-4 text-center">
<i class="fa fa-twitter fa-lg text-blue-light"></i>
</div>
<div class="flex w-1/3 justify-end py-2">
<input class="flex-initial appearance-none rounded-full h-8 border border-grey-light bg-grey-lighter pl-2 mr-3"
type="text" placeholder="Search twitter">
<img class="flex-initial rounded-full h-8 w-8 mr-3"
src="https://pbs.twimg.com/profile_images/880965035719352320/E70gGEA-_normal.jpg" alt="">
<button class="flex-initial rounded-full bg-blue-light text-white py-2 px-4 text-xs">Tweet</button>
</div>
</div>
</div>
</nav>
<div class="container mx-auto mt-2">
<div class="flex">
<div class="w-1/4 mr-2">
<div>
<div class="bg-blue-light h-24"></div>
<div class="bg-white pb-2">
<div class="flex">
<div class="w-1/3">
<img class="rounded-full border-white border-2 -mt-8 ml-4"
src="https://pbs.twimg.com/profile_images/880965035719352320/E70gGEA-_bigger.jpg"
alt="">
</div>
<div class="w-2/3 mt-4">
<h3>Radostin Bonev</h3>
<h4 class="text-grey font-hairline text-sm">@RadostinBonev</h4>
</div>
</div>
<div class="flex px-4 mt-3">
<div class="w-1/3">
<div class="text-xs font-bold text-grey-darker">Tweets</div>
<div class="text-blue font-bold">154</div>
</div>
<div class="w-1/3">
<div class="text-xs font-bold text-grey-darker">Following</div>
<div class="text-blue font-bold">150</div>
</div>
<div class="w-1/3">
<div class="text-xs font-bold text-grey-darker">Followers</div>
<div class="text-blue font-bold">49</div>
</div>
</div>
</div>
</div>
<div class="bg-white mt-2 py-4 px-4">
<div class="flex">
<h4 class="mr-2">Trends for you</h4>
<a class="pt-1 font-hairline text-xs text-blue" href="#">Change</a>
</div>
<div class="mt-2">
<ul class="list-reset">
<li class="py-1">
<a href="#" class="text-blue">#OpenFestBG</a>
</li>
<li class="py-1">
<a href="#" class="text-blue">#MVPBuzz</a>
</li>
<li class="py-1">
<a href="#" class="text-blue">#Qualcomm</a>
<div class="text-xs font-hairline text-grey-dark">19.2K Tweets</div>
</li>
<li class="py-1">
<a href="#" class="text-blue">#MondayMotivation</a>
<div class="text-xs font-hairline text-grey-dark">133K Tweets</div>
</li>
<li class="py-1">
<a href="#" class="text-blue">#TexasChurchMassacre</a>
<div class="text-xs font-hairline text-grey-dark">60.2K Tweets</div>
</li>
</ul>
</div>
</div>
</div>
<div class="w-1/2 mr-2">
<div class="flex bg-blue-lightest border-b">
<div class="py-4 pl-6">
<img class="flex rounded-full h-8 w-8 mr-3"
src="https://pbs.twimg.com/profile_images/880965035719352320/E70gGEA-_normal.jpg" alt="">
</div>
<div class="py-4 w-full pr-4">
<input class="w-full border border-blue-lighter rounded-lg py-1 px-2" type="text"
placeholder="What's happening?">
</div>
</div>
<div class="flex bg-grey-lighter py-2 border-b">
<p class="text-blue mx-auto">See 22 new Tweets</p>
</div>
<div class="bg-grey-lightest flex flex-col">
<div class="flex py-2 px-2 border-b">
<div class="flex-none mr-2">
<img class="rounded-full h-12 w-12"
src="https://pbs.twimg.com/profile_images/907652118688829440/FrshWMKt_bigger.jpg"
alt="">
</div>
<div class="flex-initial">
<div class="flex">
<h6 class="text-xs mr-2">Amazon Web Services</h6> <span
class="text-xs text-grey font-hairline">@awscloud 2h</span>
</div>
<p class="text-xs mt-2">
TechnologyOne: Moving to Microservices using Application Load Balancers and
CloudFormation.
</p>
<div class="mt-2 pr-1">
<img class="rounded"
src="https://pbs.twimg.com/amplify_video_thumb/927566247994281984/img/EXwGfsDSZ-finKNK.jpg"
alt="">
</div>
<div class="flex mt-2 text-grey-dark">
<div class="mr-8">
<i class="fa fa-comment-o"></i>
</div>
<div class="mr-8">
<i class="fa fa-retweet"></i> <span class="text-xs">6</span>
</div>
<div class="mr-8">
<i class="fa fa-heart-o"></i> <span class="text-xs">16</span>
</div>
<div class="mr-8">
<i class="fa fa-envelope-o"></i>
</div>
</div>
</div>
</div>
<div class="flex py-2 px-2 border-b">
<div class="flex-none mr-2">
<img class="rounded-full h-12 w-12"
src="https://pbs.twimg.com/profile_images/867070777878859777/MtfeEkqy_bigger.jpg"
alt="">
</div>
<div class="flex-initial">
<div class="flex">
<h6 class="text-xs mr-2">Game of Thrones</h6> <span
class="text-xs text-grey font-hairline">@GameOfThrones 2h</span>
</div>
<p class="text-xs mt-2">
Rally the realm. <br>
Prepare for winter with <a class="text-blue" href="#">#GameofThrones</a>
and the <a class="text-blue" href="#">@HBO</a>
</p>
<div class="mt-2 pr-1">
<img class="rounded" src="https://pbs.twimg.com/media/DNt0gZzXcAAAW85.jpg" alt="">
</div>
<div class="flex mt-2 text-grey-dark">
<div class="mr-8">
<i class="fa fa-comment-o"></i> <span class="text-xs">18</span>
</div>
<div class="mr-8">
<i class="fa fa-retweet"></i> <span class="text-xs">89</span>
</div>
<div class="mr-8">
<i class="fa fa-heart-o"></i> <span class="text-xs">416</span>
</div>
<div class="mr-8">
<i class="fa fa-envelope-o"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-1/4">
<div class="bg-white py-4 px-4">
<div class="flex">
<h4 class="mr-2">Who to follow</h4>
<a class="pt-1 font-hairline text-xs text-blue mr-2" href="#">Refresh</a>
<a class="pt-1 font-hairline text-xs text-blue" href="#">View All</a>
</div>
<div class="flex flex-col mt-2">
<div class="flex border-b py-2">
<img class="rounded-full h-12 w-12"
src="https://pbs.twimg.com/profile_images/778378996580888577/MFKh-pNn_bigger.jpg" alt="">
<div class="px-2">
<span class="text-sm font-bold">Stripe</span> <span class="text-xs font-hairline text-grey">@stripe</span>
<div class="mt-1">
<button class="border border-blue-light py-1 px-6 rounded-full text-blue-light text-xs">
Follow
</button>
</div>
</div>
</div>
<div class="flex border-b py-2">
<img class="rounded-full h-12 w-12"
src="https://pbs.twimg.com/profile_images/648436015183466496/GNX6nv2s_bigger.png" alt="">
<div class="px-2">
<span class="text-sm font-bold">Modern SQL</span> <span
class="text-xs font-hairline text-grey">@ModernSQL</span>
<div class="mt-1">
<button class="border border-blue-light py-1 px-6 rounded-full text-blue-light text-xs">
Follow
</button>
</div>
</div>
</div>
<div class="pt-4">
<a href="#" class="text-blue-light text-xs">
<i class="fa fa-users"></i> Find people you know
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
@alexbowers
Copy link

Is there a reason you don't have your content within your body tags?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment