Skip to content

Instantly share code, notes, and snippets.

@Radostin

Radostin/twitter.html

Created November 6, 2017 20:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Radostin/ee1e6bd890621b15d57d550d49bbe762 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Radostin/ee1e6bd890621b15d57d550d49bbe762 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Radostin created this gist Nov 6, 2017.
    232 changes: 232 additions & 0 deletions twitter.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,232 @@
    <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>