├── .DS_Store
├── bellroy
    ├── .DS_Store
    ├── img
    │   ├── bags.jpg
    │   ├── keys.jpg
    │   ├── mens.jpg
    │   ├── work.jpg
    │   ├── .DS_Store
    │   ├── banner.jpg
    │   ├── phone.jpg
    │   ├── womens.jpg
    │   └── texture.svg
    └── index.html
├── tesla
    ├── img
    │   └── bg.jpg
    └── index.html
├── helpscout
    ├── .DS_Store
    ├── img
    │   ├── 1.png
    │   ├── 2.png
    │   ├── 3.jpg
    │   ├── bag.png
    │   ├── dots.jpg
    │   ├── jira.png
    │   ├── .DS_Store
    │   ├── banner.jpg
    │   ├── books.jpg
    │   ├── footer.png
    │   ├── graph.jpg
    │   ├── hubspot.png
    │   ├── laptop.jpg
    │   ├── people.jpg
    │   ├── reading.png
    │   ├── shopify.png
    │   ├── slack.png
    │   ├── trophy.jpg
    │   ├── certified.png
    │   ├── customer.png
    │   ├── mailchimp.png
    │   ├── salesforce.png
    │   ├── woocommerce.png
    │   └── customer-logos
    │   │   ├── buffer.png
    │   │   ├── grubhub.png
    │   │   ├── pocket.png
    │   │   ├── tradesy.png
    │   │   ├── trello.png
    │   │   └── tuftandneedle.png
    └── index.html
├── twitter
    ├── img
    │   ├── ss.jpg
    │   ├── to.jpg
    │   ├── tw.png
    │   ├── header.jpeg
    │   └── profile.jpg
    └── index.html
├── whatsapp
    ├── img
    │   └── bg.png
    └── index.html
├── screenshots
    ├── .DS_Store
    ├── tesla.png
    ├── bellroy.png
    ├── helpscout.png
    ├── twitter.png
    ├── whatsapp.png
    └── youtube.png
├── index.html
├── README.md
└── youtube
    └── index.html


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/.DS_Store


--------------------------------------------------------------------------------
/bellroy/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/bellroy/.DS_Store


--------------------------------------------------------------------------------
/tesla/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/tesla/img/bg.jpg


--------------------------------------------------------------------------------
/bellroy/img/bags.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/bellroy/img/bags.jpg


--------------------------------------------------------------------------------
/bellroy/img/keys.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/bellroy/img/keys.jpg


--------------------------------------------------------------------------------
/bellroy/img/mens.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/bellroy/img/mens.jpg


--------------------------------------------------------------------------------
/bellroy/img/work.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/bellroy/img/work.jpg


--------------------------------------------------------------------------------
/helpscout/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/.DS_Store


--------------------------------------------------------------------------------
/helpscout/img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/1.png


--------------------------------------------------------------------------------
/helpscout/img/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/2.png


--------------------------------------------------------------------------------
/helpscout/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/3.jpg


--------------------------------------------------------------------------------
/twitter/img/ss.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/twitter/img/ss.jpg


--------------------------------------------------------------------------------
/twitter/img/to.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/twitter/img/to.jpg


--------------------------------------------------------------------------------
/twitter/img/tw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/twitter/img/tw.png


--------------------------------------------------------------------------------
/whatsapp/img/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/whatsapp/img/bg.png


--------------------------------------------------------------------------------
/bellroy/img/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/bellroy/img/.DS_Store


--------------------------------------------------------------------------------
/bellroy/img/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/bellroy/img/banner.jpg


--------------------------------------------------------------------------------
/bellroy/img/phone.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/bellroy/img/phone.jpg


--------------------------------------------------------------------------------
/bellroy/img/womens.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/bellroy/img/womens.jpg


--------------------------------------------------------------------------------
/helpscout/img/bag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/bag.png


--------------------------------------------------------------------------------
/helpscout/img/dots.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/dots.jpg


--------------------------------------------------------------------------------
/helpscout/img/jira.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/jira.png


--------------------------------------------------------------------------------
/screenshots/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/screenshots/.DS_Store


--------------------------------------------------------------------------------
/screenshots/tesla.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/screenshots/tesla.png


--------------------------------------------------------------------------------
/helpscout/img/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/.DS_Store


--------------------------------------------------------------------------------
/helpscout/img/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/banner.jpg


--------------------------------------------------------------------------------
/helpscout/img/books.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/books.jpg


--------------------------------------------------------------------------------
/helpscout/img/footer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/footer.png


--------------------------------------------------------------------------------
/helpscout/img/graph.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/graph.jpg


--------------------------------------------------------------------------------
/helpscout/img/hubspot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/hubspot.png


--------------------------------------------------------------------------------
/helpscout/img/laptop.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/laptop.jpg


--------------------------------------------------------------------------------
/helpscout/img/people.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/people.jpg


--------------------------------------------------------------------------------
/helpscout/img/reading.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/reading.png


--------------------------------------------------------------------------------
/helpscout/img/shopify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/shopify.png


--------------------------------------------------------------------------------
/helpscout/img/slack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/slack.png


--------------------------------------------------------------------------------
/helpscout/img/trophy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/trophy.jpg


--------------------------------------------------------------------------------
/screenshots/bellroy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/screenshots/bellroy.png


--------------------------------------------------------------------------------
/screenshots/helpscout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/screenshots/helpscout.png


--------------------------------------------------------------------------------
/screenshots/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/screenshots/twitter.png


--------------------------------------------------------------------------------
/screenshots/whatsapp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/screenshots/whatsapp.png


--------------------------------------------------------------------------------
/screenshots/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/screenshots/youtube.png


--------------------------------------------------------------------------------
/twitter/img/header.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/twitter/img/header.jpeg


--------------------------------------------------------------------------------
/twitter/img/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/twitter/img/profile.jpg


--------------------------------------------------------------------------------
/helpscout/img/certified.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/certified.png


--------------------------------------------------------------------------------
/helpscout/img/customer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/customer.png


--------------------------------------------------------------------------------
/helpscout/img/mailchimp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/mailchimp.png


--------------------------------------------------------------------------------
/helpscout/img/salesforce.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/salesforce.png


--------------------------------------------------------------------------------
/helpscout/img/woocommerce.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/woocommerce.png


--------------------------------------------------------------------------------
/helpscout/img/customer-logos/buffer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/customer-logos/buffer.png


--------------------------------------------------------------------------------
/helpscout/img/customer-logos/grubhub.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/customer-logos/grubhub.png


--------------------------------------------------------------------------------
/helpscout/img/customer-logos/pocket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/customer-logos/pocket.png


--------------------------------------------------------------------------------
/helpscout/img/customer-logos/tradesy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/customer-logos/tradesy.png


--------------------------------------------------------------------------------
/helpscout/img/customer-logos/trello.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/customer-logos/trello.png


--------------------------------------------------------------------------------
/helpscout/img/customer-logos/tuftandneedle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michdess/tailwind/HEAD/helpscout/img/customer-logos/tuftandneedle.png


--------------------------------------------------------------------------------
/bellroy/img/texture.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"><path fill="#cacaca" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"></path></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
 5 |     <title>Tailwind Website Clones</title>
 6 |   </head>
 7 |   <body class="py-4 flex flex-col items-center bg-gray-200 min-h-screen">
 8 |     <h1 class="my-2 text-3xl text-center leading-9 tracking-tight font-extrabold text-gray-900 sm:text-4xl sm:leading-10">
 9 |       Clones of various websites in Tailwind.
10 |     </h1>
11 | 
12 |     <div class="my-4 w-full sm:w-1/3 flex flex-wrap">
13 |       <a href="/bellroy" class="py-4 px-6 m-2 rounded-md text-xl text-gray-900 bg-white shadow-lg flex-grow text-center">Bellroy</a>
14 |       <a href="/helpscout" class="py-4 px-6 m-2 rounded-md text-xl text-gray-900 bg-white shadow-lg flex-grow text-center">Helpscout</a>
15 |       <a href="/tesla" class="py-4 px-6 m-2 rounded-md text-xl text-gray-900 bg-white shadow-lg flex-grow text-center">Tesla</a>
16 |       <a href="/twitter" class="py-4 px-6 m-2 rounded-md text-xl text-gray-900 bg-white shadow-lg flex-grow text-center">Twitter</a>
17 |       <a href="/whatsapp" class="py-4 px-6 m-2 rounded-md text-xl text-gray-900 bg-white shadow-lg flex-grow text-center">Whatsapp</a>
18 |       <a href="/youtube" class="py-4 px-6 m-2 rounded-md text-xl text-gray-900 bg-white shadow-lg flex-grow text-center">Youtube</a>
19 |     </div>
20 |     <h2 class="my-2 text-2xl text-center leading-9 tracking-tight font-extrabold text-gray-900  sm:leading-10">
21 |       Check back for more later...
22 |     </h2>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![Netlify Status](https://api.netlify.com/api/v1/badges/8d15bbfe-78cd-4e0e-8729-68c1ca6d8bce/deploy-status)](https://app.netlify.com/sites/frosty-feynman-7686e6/deploys)
 2 | # Tailwind CSS Website Clones (Tailwind CSS examples)
 3 | These are website clones/examples made using [Tailwind CSS](tailwindcss.com). 
 4 | ## What is this about?
 5 | The goal is to use as much of the default CSS as possible to try make UI's of various websites. Icons are sourced from [Zondicons](zondicons.com) and I try to match the subject as much as possible. Any custom CSS needed is included in each file. The tailwind CDN is being used as the source of the CSS so you dont need to compile anything. They are built to varying degrees of responsiveness...so they may look a bit off on smaller screens.
 6 | 
 7 | The list so far: 
 8 | * Tesla - [demo](https://frosty-feynman-7686e6.netlify.com/tesla)
 9 | * Youtube - [demo](https://frosty-feynman-7686e6.netlify.com/youtube)
10 | * Bellroy - [demo](https://frosty-feynman-7686e6.netlify.com/bellroy)
11 | * Whatsapp - [demo](https://frosty-feynman-7686e6.netlify.com/whatsapp)
12 | * HelpScout - [demo](https://frosty-feynman-7686e6.netlify.com/helpscout)
13 | * Twitter - [demo](https://frosty-feynman-7686e6.netlify.com/twitter)
14 | 
15 | ## What these things look like
16 | ![Tesla Screenshot](screenshots/tesla.png)
17 | ![Whatsapp Screenshot](screenshots/whatsapp.png)
18 | ![YouTube Screenshot](screenshots/youtube.png)
19 | ![Bellroy Screenshot](screenshots/bellroy.png)
20 | ![HelpScout Screenshot](screenshots/helpscout.png)
21 | ![Twitter Screenshot](screenshots/twitter.png)


--------------------------------------------------------------------------------
/tesla/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<title>Tailwind Tesla</title>
 5 | 	<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
 6 | 	<style>
 7 | 		body{
 8 | 			font-family: "HelveticaNeue-Regular","Helvetica Neue Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
 9 | 			background: url('../tesla/img/bg.jpg') center center;
10 | 			background-size: cover;
11 | 		}
12 | 		body *{
13 | 			transition: all 0.4s;
14 | 		}
15 | 	</style>
16 | </head>
17 | <body class="bg-blue-100 h-screen flex flex-col justify-center">
18 | <nav class="flex justify-between items-center text-white px-5 py-3 text-sm absolute top-0 left-0 right-0">
19 | <div>
20 | 	<img class="h-4" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTMiPjxwYXRoIGQ9Ik0wIDBjLjMgMS4xIDEuMyAyLjMgMi42IDIuNmg0LjFsLjIuMVYxM2gyLjVWMi43bC4yLS4xaDQuMWMxLjQtLjQgMi4zLTEuNSAyLjYtMi42SDB6bTc3LjggMTNjMS4zLS41IDItMS41IDIuMi0yLjZINjguN1YtLjFoLTIuNXYxM2gxMS42ek00Ny4zIDIuNmg5YzEuMy0uNCAyLjUtMS40IDIuNy0yLjZINDQuOHY3LjdoMTEuNnYyLjdoLTkuMWMtMS40LjQtMi42IDEuNC0zLjIgMi42SDU5VjUuMkg0Ny4zVjIuNnptMzguMSAyLjZWMTNIODhWNy44aDkuMVYxM2gyLjZWNS4yTTI1LjIgMi42aDkuN2MxLjMtLjMgMi40LTEuNSAyLjYtMi42aC0xNWMuNCAxLjIgMS40IDIuMyAyLjcgMi42bTAgNS4yaDkuN2MxLjMtLjMgMi40LTEuNSAyLjYtMi42aC0xNWMuNCAxLjEgMS40IDIuMyAyLjcgMi42bTAgNS4yaDkuN2MxLjMtLjMgMi40LTEuNSAyLjYtMi42aC0xNWMuNCAxLjIgMS40IDIuNCAyLjcgMi42TTg3LjcgMi42aDkuN2MxLjMtLjMgMi40LTEuNSAyLjYtMi42SDg1Yy4zIDEuMiAxLjMgMi40IDIuNyAyLjYiIGZpbGw9IiNGRkYiLz48L3N2Zz4=" />
21 | </div>
22 | <div class="text-md hidden md:block">
23 | 	<a class="mx-2 text-white hover:text-gray-400" href="#">MODEL S</a>
24 | 	<a class="mx-2 text-white hover:text-gray-400" href="#">MODEL 3</a>
25 | 	<a class="mx-2 text-white hover:text-gray-400" href="#">MODEL X</a>
26 | 	<a class="mx-2 text-white hover:text-gray-400" href="#">MODEL Y</a>
27 | 	<a class="mx-2 text-white hover:text-gray-400" href="#">ROADSTER</a>
28 | 	<a class="mx-2 text-white hover:text-gray-400" href="#">ENERGY</a>
29 | </div>
30 | <div class="text-md flex items-center">
31 | 	<a class="mx-2 text-white hover:text-gray-400" href="#">SHOP</a>
32 | 	<a class="mx-2 text-white hover:text-gray-400" href="#">SIGN IN</a>
33 | 	<svg class="mx-2 h-4 w-4 cursor-pointer" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
34 | 		<g id="Page-1" stroke="white" stroke-width="1" fill="white" fill-rule="evenodd">
35 | 			<g id="icon-shape">
36 | 				<path d="M0,3 L20,3 L20,5 L0,5 L0,3 Z M0,9 L20,9 L20,11 L0,11 L0,9 Z M0,15 L20,15 L20,17 L0,17 L0,15 Z" id="Combined-Shape"></path>
37 | 			</g>
38 | 		</g>
39 | 	</svg>
40 | </div>
41 | </nav>
42 | 
43 | <div class="flex flex-col justify-center items-center -mt-64">
44 | 	<p class="text-white text-5xl p-4 text-center">Model S</p>
45 | 	<div class="flex flex-col sm:flex-row w-1/2 mb-4">
46 | 		<button class="bg-white text-black rounded-full mx-2 my-2 flex-grow border-4 border-white py-2 w-100 sm:w-1/2 uppercase text-xs">Custom Order</button>
47 | 		<button class="hover:text-black hover:bg-white text-white rounded-full mx-2 my-2 flex-grow border-4 border-white py-2 w-100 sm:w-1/2 uppercase text-xs">Existing Inventory</button>
48 | 	</div>
49 | 	<a href="#" class="underline text-white text-sm tracking-wider">Visit a store</a>
50 | </div>
51 | 
52 | <footer class="bottom-0 left-0 right-0 absolute">
53 | 	<p class="text-white text-sm leading-loose tracking-wider w-100 text-center">Free unlimited Supercharging on inventory cars.</p>
54 | 	<div class="text-center flex items-center justify-center cursor-pointer">
55 | 		<svg class="h-8 w-8" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
56 | 			<g id="Page-1" stroke="white" stroke-width="1" fill="white" fill-rule="evenodd">
57 | 				<g id="icon-shape">
58 | 					<polygon id="Combined-Shape" points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8"></polygon>							</g>
59 | 			</g>
60 | 		</svg>
61 | 	</div>
62 | </footer>
63 | </body>
64 | </html>


--------------------------------------------------------------------------------
/whatsapp/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Whatsapp Tailwind</title>
  5 | 	<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  6 | 	<link href="https://fonts.googleapis.com/css?family=PT+Serif&display=swap" rel="stylesheet">
  7 | 	<style>
  8 | 		.speech-bubble-right::before{
  9 | 			  content: "";
 10 | 			  width: 0px;
 11 | 			  height: 0px;
 12 | 			  position: absolute;
 13 | 			  border-left: 5px solid #9ae6b4;
 14 | 			  border-right: 5px solid transparent;
 15 | 			  border-top: 5px solid #9ae6b4;
 16 | 			  border-bottom: 5px solid transparent;
 17 | 			  right: -10px;
 18 | 			  top: 0;
 19 | 		}
 20 | 		.speech-bubble-left::before{
 21 | 			  content: "";
 22 | 			  width: 0px;
 23 | 			  height: 0px;
 24 | 			  position: absolute;
 25 | 			  border-left: 5px solid transparent;
 26 | 			  border-right: 5px solid white;
 27 | 			  border-top: 5px solid white;
 28 | 			  border-bottom: 5px solid transparent;
 29 | 			  left: -10px;
 30 | 			  top: 0;
 31 | 		}
 32 | 	</style>
 33 | </head>
 34 | <body class="h-screen xl:p-5 bg-teal-600 flex items-center justify-center" style="background: rgb(49,151,149);
 35 | background: linear-gradient(180deg, rgba(49,151,149,1) 0%, rgba(49,151,149,1) 14%, rgba(203,213,224,1) 14%);">
 36 | 	<div class="flex shadow w-full max-w-6xl bg-white h-full xl:rounded">
 37 | 		<div class="w-1/3 border-r border-gray-300">
 38 | 			<div class="w-full p-2 h-16 rounded rounded-b-none bg-gray-200 flex items-center justify-between">
 39 | 				<a class="bg-purple-800 rounded-full text-white w-10 h-10 flex items-center justify-center text-lg mr-2" href="#">
 40 | 						<img src="http://www.placekitten.com/60/60" class="h-full w-full object-cover rounded-full overflow-hidden"/>
 41 | 				</a>
 42 | 				<div class="text-gray-500 flex flex-row">
 43 | 					<p class="h-5 w-5 cursor-pointer text-gray-600 mx-2">
 44 | <svg class="fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 45 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
 46 | 							<g id="icon-shape">
 47 | 								<path d="M10,20 C15.5228475,20 20,15.5228475 20,10 C20,4.4771525 15.5228475,0 10,0 C4.4771525,0 0,4.4771525 0,10 C0,15.5228475 4.4771525,20 10,20 Z M6.99999861,6.00166547 C6.99999861,4.34389141 8.3465151,3 9.99999722,3 C11.6568507,3 12.9999958,4.33902013 12.9999958,6.00166547 L12.9999958,7.99833453 C12.9999958,9.65610859 11.6534793,11 9.99999722,11 C8.34314374,11 6.99999861,9.66097987 6.99999861,7.99833453 L6.99999861,6.00166547 Z M3.34715433,14.4444439 C5.37306718,13.5169611 7.62616222,13 10,13 C12.3738388,13 14.6269347,13.5169615 16.6528458,14.4444437 C15.2177146,16.5884188 12.7737035,18 10,18 C7.22629656,18 4.78228556,16.5884189 3.34715433,14.4444439 L3.34715433,14.4444439 Z" id="Combined-Shape"></path>				
 48 | 							</g>
 49 | 						</g>
 50 | 						</svg>
 51 | 					</p>
 52 | 				<p class="h-5 w-5 cursor-pointer text-gray-600 mx-2">
 53 | <svg class="fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 54 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
 55 | 							<g id="icon-shape">
 56 | 								<path d="M10,15 L18.0092049,15 C19.1017876,15 20,14.1019465 20,12.9941413 L20,3.00585866 C20,1.89706013 19.1086907,1 18.0092049,1 L1.99079514,1 C0.898212381,1 0,1.89805351 0,3.00585866 L0,12.9941413 C0,14.1029399 0.891309342,15 1.99079514,15 L6,15 L6,19 L10,15 Z M5,7 L7,7 L7,9 L5,9 L5,7 Z M9,7 L11,7 L11,9 L9,9 L9,7 Z M13,7 L15,7 L15,9 L13,9 L13,7 Z" id="Combined-Shape"></path>							
 57 | 							</g>
 58 | 						</g>
 59 | 						</svg>
 60 | 				</p>
 61 | 				<p class="h-5 w-5 cursor-pointer text-gray-600 mx-2">
 62 | 					<svg class="fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 63 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
 64 | 							<g id="icon-shape">
 65 | 								<path d="M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z M10,6 C11.1045695,6 12,5.1045695 12,4 C12,2.8954305 11.1045695,2 10,2 C8.8954305,2 8,2.8954305 8,4 C8,5.1045695 8.8954305,6 10,6 Z M10,18 C11.1045695,18 12,17.1045695 12,16 C12,14.8954305 11.1045695,14 10,14 C8.8954305,14 8,14.8954305 8,16 C8,17.1045695 8.8954305,18 10,18 Z" id="Combined-Shape"></path>
 66 | 							</g>
 67 | 						</g>
 68 | 						</svg>
 69 | 					</p>	
 70 | 				</div>
 71 | 			</div>
 72 | 			<form class="bg-gray-100 px-2 py-2 flex flex-grow">
 73 | 					<input class="text-sm px-4 py-1 rounded-full flex flex-grow" placeholder="Search or start a new chat" />
 74 | 			</form>
 75 | 
 76 | 				<div class="flex items-center w-full p-4 cursor-pointer hover:bg-gray-200">				
 77 | 					<a class="bg-purple-800 rounded-full text-white w-10 h-10 flex items-center justify-center text-lg mr-2" href="#">
 78 | 						<img src="http://www.fillmurray.com/60/60" class="h-full w-full object-cover rounded-full overflow-hidden"/>
 79 | 					</a>
 80 | 					<div class="flex flex-col flex-grow">
 81 | 						<div class="flex flex-row justify-between items-end">
 82 | 							<p class="text-black text-md">Bill Murray</p>
 83 | 							<p class="text-gray-600 text-xs">8:45 AM</p>
 84 | 						</div>
 85 | 						<p class="text-gray-600 text-sm">Who ya gonna call?...Ghostbusters...</p>
 86 | 					</div>
 87 | 				</div>
 88 | 				<div class="flex items-center w-full p-4 cursor-pointer bg-gray-300 hover:bg-gray-200">				
 89 | 					<a class="bg-purple-800 rounded-full text-white w-10 h-10 flex items-center justify-center text-lg mr-2" href="#">
 90 | 						<img src="http://www.placecage.com/60/60" class="h-full w-full object-cover rounded-full overflow-hidden"/>
 91 | 					</a>
 92 | 					<div class="flex flex-col flex-grow">
 93 | 						<div class="flex flex-row justify-between items-end">
 94 | 							<p class="text-black text-md">Nicolas Cage</p>
 95 | 							<p class="text-gray-600 text-xs">8:45 AM</p>
 96 | 						</div>
 97 | 						<p class="text-gray-600 text-sm">Steal the declaration of independence?...</p>
 98 | 					</div>
 99 | 				</div>
100 | 				<div class="flex items-center w-full p-4 cursor-pointer hover:bg-gray-200">				
101 | 					<a class="bg-purple-800 rounded-full text-white w-10 h-10 flex items-center justify-center text-lg mr-2" href="#">
102 | 						<img src="http://www.stevensegallery.com/60/60" class="h-full w-full object-cover rounded-full overflow-hidden"/>
103 | 					</a>
104 | 					<div class="flex flex-col flex-grow">
105 | 						<div class="flex flex-row justify-between items-end">
106 | 							<p class="text-black text-md">Steven Seagal</p>
107 | 							<p class="text-gray-600 text-xs">8:45 AM</p>
108 | 						</div>
109 | 						<p class="text-gray-600 text-sm">Wanna help bring justice to Louisiana?...</p>
110 | 					</div>
111 | 				</div>
112 | 				<div class="flex items-center w-full p-4 cursor-pointer hover:bg-gray-200">				
113 | 					<a class="bg-purple-800 rounded-full text-white w-10 h-10 flex items-center justify-center text-lg mr-2" href="#">
114 | 						<img src="http://www.placekitten.com/60/60" class="h-full w-full object-cover rounded-full overflow-hidden"/>
115 | 					</a>
116 | 					<div class="flex flex-col flex-grow">
117 | 						<div class="flex flex-row justify-between items-end">
118 | 							<p class="text-black text-md">Kitty Cat</p>
119 | 							<p class="text-gray-600 text-xs">8:45 AM</p>
120 | 						</div>
121 | 						<p class="text-gray-600 text-sm">Cat stuff...</p>
122 | 					</div>
123 | 				</div>
124 | 				<div class="flex items-center w-full p-4 cursor-pointer hover:bg-gray-200">				
125 | 					<a class="bg-purple-800 rounded-full text-white w-10 h-10 flex items-center justify-center text-lg mr-2" href="#">
126 | 						<img src="https://baconmockup.com/60/60/" class="h-full w-full object-cover rounded-full overflow-hidden"/>
127 | 					</a>
128 | 					<div class="flex flex-col flex-grow">
129 | 						<div class="flex flex-row justify-between items-end">
130 | 							<p class="text-black text-md">Bacon</p>
131 | 							<p class="text-gray-600 text-xs">8:45 AM</p>
132 | 						</div>
133 | 						<p class="text-gray-600 text-sm">Bacon stuff...</p>
134 | 					</div>
135 | 				</div>
136 | 				<div class="flex items-center w-full p-4 cursor-pointer hover:bg-gray-200">				
137 | 					<a class="bg-purple-800 rounded-full text-white w-10 h-10 flex items-center justify-center text-lg mr-2" href="#">
138 | 						<img src="http://www.placebeard.it/60/60" class="h-full w-full object-cover rounded-full overflow-hidden"/>
139 | 					</a>
140 | 					<div class="flex flex-col flex-grow">
141 | 						<div class="flex flex-row justify-between items-end">
142 | 							<p class="text-black text-md">Beardy McBeardFace</p>
143 | 							<p class="text-gray-600 text-xs">8:45 AM</p>
144 | 						</div>
145 | 						<p class="text-gray-600 text-sm">Beard stuff...</p>
146 | 					</div>
147 | 				</div>
148 | 				<div class="flex items-center w-full p-4 cursor-pointer hover:bg-gray-200">				
149 | 					<a class="bg-purple-800 rounded-full text-white w-10 h-10 flex items-center justify-center text-lg mr-2" href="#">
150 | 						<img src="http://www.placebear.com/60/60" class="h-full w-full object-cover rounded-full overflow-hidden"/>
151 | 					</a>
152 | 					<div class="flex flex-col flex-grow">
153 | 						<div class="flex flex-row justify-between items-end">
154 | 							<p class="text-black text-md">Bear McBearFace</p>
155 | 							<p class="text-gray-600 text-xs">Yesterday</p>
156 | 						</div>
157 | 						<p class="text-gray-600 text-sm">Wanna help me catch salmon?...</p>
158 | 					</div>
159 | 				</div>
160 | 		</div>
161 | 		<div class="flex flex-col w-2/3 relative">
162 | 			<div class="w-full p-2 h-16 rounded rounded-b-none bg-gray-200 flex items-center justify-between">
163 | 				<div class="flex items-center">				
164 | 					<a class="bg-purple-800 rounded-full text-white w-10 h-10 flex items-center justify-center text-lg mr-2" href="#">
165 | 						<img src="http://www.placecage.com/60/60" class="h-full w-full object-cover rounded-full overflow-hidden"/>
166 | 					</a>
167 | 					<div class="flex flex-col">
168 | 						<p class="text-black text-md">Nicolas Cage</p>
169 | 						<p class="text-gray-600 text-xs">last seen today at 8:45 AM</p>
170 | 					</div>
171 | 				</div>
172 | 				<div class="text-gray-500 flex flex-row">
173 | 					<p class="h-5 w-5 cursor-pointer text-gray-600 mx-2">
174 | 						<svg class="fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
175 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
176 | 							<g id="icon-shape">
177 | 								<path d="M12.9056439,14.3198574 C11.5509601,15.3729184 9.84871145,16 8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,9.84871145 15.3729184,11.5509601 14.3198574,12.9056439 L19.6568542,18.2426407 L18.2426407,19.6568542 L12.9056439,14.3198574 Z M8,14 C11.3137085,14 14,11.3137085 14,8 C14,4.6862915 11.3137085,2 8,2 C4.6862915,2 2,4.6862915 2,8 C2,11.3137085 4.6862915,14 8,14 Z" id="Combined-Shape"></path>
178 | 							</g>
179 | 						</g>
180 | 						</svg>
181 | 					</p>
182 | 				<p class="h-5 w-5 cursor-pointer text-gray-600 mx-2">
183 | 					<svg class="fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
184 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
185 | 							<g id="icon-shape">
186 | 								<path d="M15,3 L7,3 C3.13400675,3 0,6.13400675 0,10 C0,13.8659932 3.13400675,17 7,17 L15,17 L15,15 L9.44949137,15 L7,15 C4.23857625,15 2,12.7614237 2,10 C2,7.23857625 4.23857625,5 7,5 L9.44949137,5 L12.9998169,5 L15,5 C16.6568542,5 18,6.34314575 18,8 C18,9.65685425 16.6568542,11 15,11 L12.9998169,11 L8.41464715,11 L7,11 C6.44771525,11 6,10.5522847 6,10 C6,9.44771525 6.44771525,9 7,9 L8.41464715,9 L15,9 L15,7 L7,7 C5.34314575,7 4,8.34314575 4,10 C4,11.6568542 5.34314575,13 7,13 L15,13 C17.7614237,13 20,10.7614237 20,8 C20,5.23857625 17.7614237,3 15,3 Z" id="Combined-Shape"></path>							
187 | 							</g>
188 | 						</g>
189 | 						</svg>
190 | 				</p>
191 | 				<p class="h-5 w-5 cursor-pointer text-gray-600 mx-2">
192 | 					<svg class="fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
193 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
194 | 							<g id="icon-shape">
195 | 								<path d="M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z M10,6 C11.1045695,6 12,5.1045695 12,4 C12,2.8954305 11.1045695,2 10,2 C8.8954305,2 8,2.8954305 8,4 C8,5.1045695 8.8954305,6 10,6 Z M10,18 C11.1045695,18 12,17.1045695 12,16 C12,14.8954305 11.1045695,14 10,14 C8.8954305,14 8,14.8954305 8,16 C8,17.1045695 8.8954305,18 10,18 Z" id="Combined-Shape"></path>
196 | 							</g>
197 | 						</g>
198 | 						</svg>
199 | 					</p>				
200 | 				</div>
201 | 			</div>
202 | 			<div class="mb-16 relative flex flex-grow flex-col px-12 justify-end" style="background-color:#e5ddd5;">
203 | 				<p class="absolute top-0 left-0 bottom-0 right-0 opacity-25" style="background-image: url('../whatsapp/img/bg.png');"></p>
204 | 				<div class="ml-auto rounded-lg rounded-tr-none my-1 p-2 text-sm bg-green-300 flex flex-col relative speech-bubble-right">
205 | 					<p class="">Do you still have that car from gone in 60 seconds? Can I borrow it please.</p>
206 | 					<p class="text-gray-600 text-xs text-right leading-none">8:00 AM</p>
207 | 				</div>
208 | 				<div class="mr-auto rounded-lg rounded-tl-none my-1 p-2 text-sm bg-white flex flex-col relative speech-bubble-left">
209 | 					<p >Yeah dude for sure</p>
210 | 					<p class="text-gray-600 text-xs text-right leading-none">8:45 AM</p>
211 | 				</div>
212 | 				<div class="ml-auto rounded-lg rounded-tr-none my-1 p-2 text-sm bg-green-300 flex flex-col relative speech-bubble-right">
213 | 					<p class="">Dude WTF was up with that plane you were on!!!?</p>
214 | 					<p class="text-gray-600 text-xs text-right leading-none">8:00 AM</p>
215 | 				</div>
216 | 				<div class="mr-auto rounded-lg rounded-tl-none my-1 p-2 text-sm bg-white flex flex-col relative speech-bubble-left">
217 | 					<p >LOL I Know right </p>
218 | 					<p class="text-gray-600 text-xs text-right leading-none">8:45 AM</p>
219 | 				</div>
220 | 				<div class="ml-auto rounded-lg rounded-tr-none my-1 p-2 text-sm bg-green-300 flex flex-col relative speech-bubble-right">
221 | 					<p class="">Hey man what should we do this weekend?</p>
222 | 					<p class="text-gray-600 text-xs text-right leading-none">8:00 AM</p>
223 | 				</div>
224 | 				<div class="mr-auto rounded-lg rounded-tl-none my-1 p-2 text-sm bg-white flex flex-col relative speech-bubble-left">
225 | 					<p >Steal the declaration of independence?...</p>
226 | 					<p class="text-gray-600 text-xs text-right leading-none">8:45 AM</p>
227 | 				</div>
228 | 			</div>
229 | 
230 | 			<footer class="p-4 bg-gray-200 h-16 flex items-center justify-between absolute bottom-0 left-0 right-0">
231 | 				<p class="h-6 w-6 text-gray-600"><svg class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM6.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm2.16 3a6 6 0 0 1-11.32 0h11.32z"></path></svg></p>
232 | 				<form class="mx-4 flex flex-grow">
233 | 					<input class="text-sm px-4 py-2 rounded-full flex flex-grow" placeholder="Type a message" />
234 | 				</form>
235 | 				<p class="h-6 w-6 text-gray-600">
236 | 					<svg class="fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
237 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
238 | 							<g id="icon-shape">
239 | 								<path d="M9,18 L9,16.9379599 C5.05368842,16.4447356 2,13.0713165 2,9 L4,9 L4,9.00181488 C4,12.3172241 6.6862915,15 10,15 C13.3069658,15 16,12.314521 16,9.00181488 L16,9 L18,9 C18,13.0790094 14.9395595,16.4450043 11,16.9378859 L11,18 L14,18 L14,20 L6,20 L6,18 L9,18 L9,18 Z M6,4.00650452 C6,1.79377317 7.79535615,0 10,0 C12.209139,0 14,1.79394555 14,4.00650452 L14,8.99349548 C14,11.2062268 12.2046438,13 10,13 C7.790861,13 6,11.2060545 6,8.99349548 L6,4.00650452 L6,4.00650452 Z" id="Combined-Shape"></path>
240 | 							</g>
241 | 						</g>
242 | 						</svg></p>
243 | 			</footer>
244 | 
245 | 		</div>
246 | 	</div>
247 | <body>
248 | </html>


--------------------------------------------------------------------------------
/bellroy/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Bellroy Tailwind</title>
  5 | 	<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  6 | 	<link href="https://fonts.googleapis.com/css?family=PT+Serif&display=swap" rel="stylesheet">
  7 | 	<style>
  8 | 		.font-pt-serif{
  9 | 			font-family: 'PT Serif', serif;
 10 | 			font-weight: 400;
 11 | 		}
 12 | 		.h-50{
 13 | 			height: 50vh;
 14 | 		}
 15 | 		.h-65{
 16 | 			height: 65vh;
 17 | 		}
 18 | 	</style>
 19 | </head>
 20 | <body class="bg-blue-100">
 21 | <nav class="flex items-end w-full bg-white p-6">
 22 | 	<div class="flex mr-4">
 23 | 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 58" style="max-height: 60px;" class="h-16 logo">
 24 | 		    <path d="M11.9 49.6c-2.1 0-4.2-.7-5.8-2.2A8.2 8.2 0 0 1 3 41.6c0-.2 0-.4-.1-.6V24.7s4.1 0 4.1 3.7v4.7l.6-.3c.1 0 .1-.1.1-.1.1 0 .2-.1.2-.1a8.2 8.2 0 0 1 4.2-1.1h.4c1.9.1 3.5.6 5 1.7 2.1 1.6 3.3 3.6 3.7 6 .3 2.1 0 4.1-1 5.8-1.5 2.5-3.5 4-6.2 4.5-.8 0-1.5.1-2.1.1zm.2-14.3c-.3 0-.6 0-.9.1-2.6.3-4.2 2.4-4.2 5v.4c0 1.5.6 2.7 1.7 3.6.9.8 2.2 1.3 3.4 1.3.9 0 1.9-.3 2.7-.7 1.9-1.1 2.7-2.9 2.4-5.2-.3-2.2-2.1-4.5-5.1-4.5zM69.1 49.6c-2.4 0-4.7-.9-6.5-2.7a8.78 8.78 0 0 1-2.7-6c-.1-2.5.7-4.9 2.5-6.7 1.8-1.8 4.1-2.9 6.7-2.9 5 0 9.2 4.1 9.2 9.1 0 2.4-.9 4.6-2.6 6.4a9.13 9.13 0 0 1-6.1 2.8h-.5zm.1-14.3c-.3 0-.6 0-1 .1a5.1 5.1 0 0 0-4.3 5.2v.4c.1 2.8 2.3 4.9 5.1 4.9.9 0 1.9-.3 2.7-.7 1.9-1.1 2.6-2.9 2.3-5.2-.1-2.5-2-4.7-4.8-4.7zM40.2 24.7v24.6h4.3V28.4c-.1-3.6-4.3-3.7-4.3-3.7zM46.4 24.7v24.6h4.3V28.4c0-3.9-4.3-3.7-4.3-3.7z"></path>
 25 | 		    <path d="M52.6 49.3v-2.7-6.4c0-1.4.1-2.9.7-4.4.9-2.1 2.5-3.3 4.7-4 1.8-.5 3.4-.4 3.4-.4v3.9s-1 0-2 .3c-1.4.4-2.3 1.3-2.5 2.8-.1.6-.2 1.4-.2 2.2v8.7h-4.1zM79.9 51.7c1.8 0 2.3.9 2.7 1.3.6.5 1.4.8 2.1.8 2.3 0 4.1-2.1 4.1-4.1v-.9c-1 .6-2.1.8-3.2.8-4.1 0-7.3-3.4-7.3-7.6V31.6h4.1v10.2c0 1.9 1.5 3.6 3.2 3.6 1.9 0 3.2-1.6 3.2-3.6v-6.5c0-3.7 4.1-3.7 4.1-3.7v18c0 4.2-3.1 8.1-8.2 8.1-3.1 0-5.9-1.8-7.1-4.7-.4-.8-.5-1.4-.5-1.4s1.3.1 2.8.1zM30.3 45.9c-1.7 0-3.1-.8-4-2l13-4.6c-.6-3-1.8-4.9-3.6-6.2a9.3 9.3 0 0 0-7-1.5c-.6.1-1 .2-1.6.4a8.96 8.96 0 0 0-5.8 9.3 9 9 0 0 0 3.2 6.2c1.8 1.5 4 2.2 6.3 2.2 1 0 1.9-.2 2.9-.6 3.7-1.3 5.4-4.1 5.8-6.7h-2.4c-1.5 0-2.1 1-2.5 1.4a5.94 5.94 0 0 1-4.3 2.1zm-1.7-10.3c.1 0 .1 0 .2-.1H29.1c.4-.1.8-.2 1.3-.2.9 0 1.8.3 2.6.7.4.2.7.5 1 .8V37.1l.4.4-9.2 3.2v-.5c.1-2.2 1.4-3.9 3.4-4.6zM75.6 5.5c-.7 0-1.3.6-1.3 1.3 0 .7.7 1.4 1.5 1.2.3 1.1.9 2.1 1.8 2.8l.4.2.4-.3c.7-.6 1.4-1.7 1.7-2.8h.3c.7 0 1.3-.6 1.3-1.3s-.7-1.2-1.4-1.2c-.8 0-1.3.6-1.3 1.3 0 .9-.5 2.1-1.1 2.9-.6-.7-1-1.8-1.1-2.9.1-.6-.5-1.2-1.2-1.2zm16.5 11.6c-2.5-6.2-6.1-8-7.6-8.6.1-.4.1-.7.1-1.2 0-3.6-3-6.5-6.6-6.5-3.5 0-6.3 2.8-6.8 6.4-.7 8.7 5 13.5 7.8 15.7 1.6 1.2 2.4 2.1 1.5 3.6-.6.8-1.2 2-1.8 2.2-1.6.3-2.1 1.3-2.1 1.3H78c1.8 0 2.3-.1 4.1-3 1.7-2.9-1-4.5-2.1-5.4-2.8-2.1-8-6.4-7.3-14.2v-.1c.3-3 2.5-5.2 5.4-5.2a5.16 5.16 0 0 1 3.7 8.8c-.9 1-2.2 1.5-3.6 1.5-.5 0-.9-.1-1.3-.2-1.4-.4-2 .6-2 .6l-.1.1.1.1c.9.6 2.2.9 3.3.9 1.8 0 3.4-.6 4.6-1.9.6-.6 1.1-1.3 1.4-2 1.2.5 4.4 2.1 6.7 7.7.6 1.4 1.1 2.8 1.6 4-1.8 0-8.1-.2-11.2-5.1-.8-1.3-2.1-1-2.1-1 3.2 7.7 12.3 7.5 14 7.6.8 2 1.5 3.6 1.8 4.5-.7 0-2.1-.3-3.7-1.7a7.11 7.11 0 0 0-5.1-1.9l-4 6.3s1.9 0 2.7-1.2l2.2-3.5c1.1.1 2.2.6 3.3 1.5 2.1 1.7 3.4 1.9 4.7 1.9 1.2.1 1.9-.3 1.9-.3s-2.4-5.6-4.9-11.7z"></path>
 26 | 		  </svg>
 27 | 	</div>
 28 | 	<div class="flex flex-grow items-end">
 29 | 		<a href="#" class="pb-2 flex items-center text-sm mx-8">Shop Products<svg class="h-4 w-4 mx-2 fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 30 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
 31 | 							<g id="icon-shape">
 32 | 								<polygon id="Combined-Shape" points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8"></polygon>							</g>
 33 | 						</g>
 34 | 						</svg></a>
 35 | 		<a href="#" class="pb-2 flex items-center text-sm mx-8">Shop Collections<svg class="h-4 w-4 mx-2 fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 36 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
 37 | 							<g id="icon-shape">
 38 | 								<polygon id="Combined-Shape" points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8"></polygon>							</g>
 39 | 						</g>
 40 | 						</svg></a>
 41 | 		<a href="#" class="pb-2 text-xs tracking-wider text-gray-700 mx-6">Help</a>
 42 | 		<a href="#" class="pb-2 text-xs tracking-wider text-gray-700 mx-6">Find-in-store</a>
 43 | 		<a href="#" class="pb-2 text-xs tracking-wider text-gray-700 mx-6">Journal</a>
 44 | 	</div>
 45 | 	<div class="flex text-gray-600">
 46 | 		<svg  class="fill-current w-6 h-6 mx-2" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 47 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
 48 | 							<g id="icon-shape">
 49 | 								<path d="M14.8780488,10.097561 L20,14 L20,16 L13.627451,11.0980392 L10,14 L6.37254902,11.0980392 L0,16 L0,14 L5.12195122,10.097561 L0,6 L0,4 L10,12 L20,4 L20,6 L14.8780488,10.097561 Z M18.0092049,2 C19.1086907,2 20,2.89451376 20,3.99406028 L20,16.0059397 C20,17.1072288 19.1017876,18 18.0092049,18 L1.99079514,18 C0.891309342,18 0,17.1054862 0,16.0059397 L0,3.99406028 C0,2.8927712 0.898212381,2 1.99079514,2 L18.0092049,2 Z" id="Combined-Shape"></path>
 50 | 							</g>
 51 | 						</g>
 52 | 						</svg>
 53 | 		<svg  class="fill-current w-6 h-6 mx-2" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 54 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
 55 | 							<g id="icon-shape">
 56 | 								<path d="M12.9056439,14.3198574 C11.5509601,15.3729184 9.84871145,16 8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,9.84871145 15.3729184,11.5509601 14.3198574,12.9056439 L19.6568542,18.2426407 L18.2426407,19.6568542 L12.9056439,14.3198574 Z M8,14 C11.3137085,14 14,11.3137085 14,8 C14,4.6862915 11.3137085,2 8,2 C4.6862915,2 2,4.6862915 2,8 C2,11.3137085 4.6862915,14 8,14 Z" id="Combined-Shape"></path>
 57 | 							</g>
 58 | 						</g>
 59 | 						</svg>
 60 | 		<svg class="fill-current w-6 h-6 mx-2" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 61 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
 62 | 							<g id="icon-shape">
 63 | 								<path d="M3,5 L4.33333333,9 L4,9 C2.34314575,9 1,10.3431458 1,12 C1,13.6568542 2.34314575,15 4,15 L17,15 L17,13 L4.00684547,13 C3.45078007,13 3,12.5561352 3,12 C3,11.4477153 3.44748943,11 3.99850233,11 L10.5,11 L17,11 L20,2 L4,2 L4,0.997030139 C4,0.453036308 3.54809015,0 2.9906311,0 L0,0 L0,2 L2,2 L3,5 Z M5,20 C6.1045695,20 7,19.1045695 7,18 C7,16.8954305 6.1045695,16 5,16 C3.8954305,16 3,16.8954305 3,18 C3,19.1045695 3.8954305,20 5,20 Z M15,20 C16.1045695,20 17,19.1045695 17,18 C17,16.8954305 16.1045695,16 15,16 C13.8954305,16 13,16.8954305 13,18 C13,19.1045695 13.8954305,20 15,20 Z" id="Combined-Shape"></path>
 64 | 							</g>
 65 | 						</g>
 66 | 						</svg>
 67 | 	</div>
 68 | </nav>
 69 | <div class="w-full h-65 flex items-center justify-center" style="background-image: url('../bellroy/img/banner.jpg'); background-size:cover;">
 70 | 	<div class="flex flex-col items-center justify-center my-4">
 71 | 		<h1 class="font-pt-serif my-4 text-white text-5xl text-center">Considered carry goods to<br/>enhance your everyday</h1>
 72 | 		<a class="uppercase bg-white tracking-widest text-center text-xs text-gray-700 w-auto px-3 py-2 border border-gray-300" href="#">shop now</a>
 73 | 	</div>
 74 | </div>
 75 | <div class="flex justify-center py-2" style="background-color: #f9f9f9;
 76 | background-image: url('../bellroy/img/texture.svg')">
 77 | 	<div class="w-3/5">
 78 | 		<p class="text-xl text-gray-700 text-center font-pt-serif leading-loose my-8">
 79 | 			You can get weighed down by baggage, bulk, stuff. It can slow you down and narrow your view. But it doesn't need to be that way. Bellroy products are designed to make your life easier, smarter and more seamless. See how...
 80 | 		</p>
 81 | 		<div class="my-4">
 82 | 			<iframe class="w-full h-65" src="https://www.youtube.com/embed/hQ6TSIFM8I0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 83 | 		</div>
 84 | 	</div>
 85 | </div>
 86 | 
 87 | <div class="flex flex-wrap">
 88 | 	<a href="#" class="w-full sm:w-1/2 h-50 relative text-white bg-teal-500" style="background-image: url('../bellroy/img/mens.jpg'); background-position: center; background-size:cover;">
 89 | 		<div class="absolute top-0 left-0 p-5">
 90 | 			<h3 class="text-3xl font-pt-serif">Men's wallets</h3>
 91 | 			<p class="text-xs my-3 uppercase">> slim your wallet</p>
 92 | 		</div>
 93 | 	</a>
 94 | 	<a href="#" class="w-full sm:w-1/2 h-50 relative text-white bg-red-500" style="background-image: url('../bellroy/img/womens.jpg'); background-position: center; background-size:cover;">
 95 | 		<div class="absolute top-0 left-0 p-5">
 96 | 			<h3 class="text-3xl font-pt-serif">Women's wallets</h3>
 97 | 			<p class="text-xs my-3 uppercase">> Put everything in its place</p>
 98 | 		</div>
 99 | 	</a>
100 | 	<a href="#" class="w-full sm:w-1/2 h-50 relative text-white bg-red-500" style="background-image: url('../bellroy/img/keys.jpg'); background-position: center; background-size:cover;">
101 | 		<div class="absolute top-0 left-0 p-5">
102 | 			<h3 class="text-3xl font-pt-serif">Key covers</h3>
103 | 			<p class="text-xs my-3 uppercase">> Stop the jangle</p>
104 | 		</div>
105 | 	</a>
106 | 	<a href="#" class="w-full sm:w-1/2 h-50 relative text-white bg-red-500" style="background-image: url('../bellroy/img/work.jpg'); background-position: center; background-size:cover;">
107 | 		<div class="absolute top-0 left-0 p-5">
108 | 			<h3 class="text-3xl font-pt-serif">Work accessories</h3>
109 | 			<p class="text-xs my-3 uppercase">> Cure the chaos</p>
110 | 		</div>
111 | 	</a>
112 | 	<a href="#" class="w-full sm:w-1/2 h-50 relative text-white bg-red-500" style="background-image: url('../bellroy/img/phone.jpg'); background-position: center; background-size:cover;">
113 | 		<div class="absolute top-0 left-0 p-5">
114 | 			<h3 class="text-3xl font-pt-serif">Phone cases</h3>
115 | 			<p class="text-xs my-3 uppercase">> Streamline your phone and wallet</p>
116 | 		</div>
117 | 	</a>
118 | 	<a href="#" class="w-full sm:w-1/2 h-50 relative text-white bg-red-500" style="background-image: url('../bellroy/img/bags.jpg'); background-position: center; background-size:cover;">
119 | 		<div class="absolute top-0 left-0 p-5">
120 | 			<h3 class="text-3xl font-pt-serif">Bags</h3>
121 | 			<p class="text-xs my-3 uppercase">> Merge work & play into one</p>
122 | 		</div>
123 | 	</a>
124 | </div>
125 | <div class="bg-black flex flex-col items-center justify-center">
126 | 	<h2 class="uppercase tracking-widest text-white my-8 text-md">DON’T MISS NEW RELEASES AND SUBSCRIBER EXCLUSIVES.</h2>
127 | 	<form class="rounded bg-white max-w-lg w-2/5 flex p-1" action="#" method="POST">
128 | 		<input class="rounded flex flex-grow rounded px-1 text-xs" placeholder="Enter your email" />
129 | 		<button class="rounded uppercase text-white bg-gray-500 text-sm p-2">submit</button>
130 | 	</form>
131 | 	<p class="flex flex-wrap max-w-lg w-2/5 text-center text-xs text-gray-200 my-6">
132 | 		You are signing up to receive product updates and newsletters. By signing up, you are consenting to our privacy policy but you can opt out at any time.
133 | 	</p>
134 | </div>
135 | <footer class="bg-gray-900 text-gray-500">
136 | 	<div class="flex justify-around px-8 xl:px-32 py-4">	
137 | 		<div class="w-1/6">
138 | 			<p class="text-xs my-2">HELP</p>
139 | 			<p class="text-xs my-2">Customer care</p>
140 | 			<p class="text-xs my-2">Shipping and delivery</p>
141 | 			<p class="text-xs my-2">3 Year Warranty</p>
142 | 			<p class="text-xs my-2">Contact us</p>
143 | 			<p class="text-xs my-2">Terms and conditions</p>
144 | 			<p class="text-xs my-2">Privacy Policy</p>
145 | 			<p class="text-xs my-2">Cookie Policy</p>
146 | 		</div>
147 | 		<div class="w-1/6">
148 | 			<p class="text-xs my-2">SHOP PRODUCTS</p>
149 | 			<p class="text-xs my-2">Men's wallets</p>
150 | 			<p class="text-xs my-2">Women's wallets</p>
151 | 			<p class="text-xs my-2">Bags</p>
152 | 			<p class="text-xs my-2">Pouches</p>
153 | 			<p class="text-xs my-2">Work accessories</p>
154 | 			<p class="text-xs my-2">Travel accessories</p>
155 | 			<p class="text-xs my-2">Phone cases</p>
156 | 			<p class="text-xs my-2">Key covers</p>
157 | 			<p class="text-xs my-2">Value bundles</p>
158 | 		</div>
159 | 		<div class="w-1/6">
160 | 			<p class="text-xs my-2">SHOP COLLECTIONS</p>
161 | 			<p class="text-xs my-2">New releases</p>
162 | 			<p class="text-xs my-2">Bestsellers</p>
163 | 			<p class="text-xs my-2">Designers Edition</p>
164 | 			<p class="text-xs my-2">Executive</p>
165 | 			<p class="text-xs my-2">Travel</p>
166 | 			<p class="text-xs my-2">Exclusives</p>
167 | 			<p class="text-xs my-2">Last chance to buys</p>
168 | 		</div>
169 | 		<div class="w-1/6">
170 | 			<p class="text-xs my-2">ABOUT</p>
171 | 			<p class="text-xs my-2">Our story</p>
172 | 			<p class="text-xs my-2">Our materials</p>
173 | 			<p class="text-xs my-2">Responsible business</p>
174 | 			<p class="text-xs my-2">Collaborations</p>
175 | 			<p class="text-xs my-2">Find in-store</p>
176 | 			<p class="text-xs my-2">Affiliate program</p>
177 | 			<p class="text-xs my-2">Corporate gifting</p>
178 | 			<p class="text-xs my-2">Press</p>
179 | 			<p class="text-xs my-2">Careers</p>
180 | 		</div>
181 | 		<div class="w-2/6 flex justify-end">
182 | 			<svg class="h-6 w-6 fill-current mx-2" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-instagram fa-w-14 fa-2x"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" class=""></path></svg>
183 | <svg class="h-6 w-6 fill-current mx-2" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-facebook-f fa-w-10 fa-2x"><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z" class=""></path></svg>
184 | <svg class="h-6 w-6 fill-current mx-2" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-twitter fa-w-16 fa-2x"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" class=""></path></svg>
185 | <svg class="h-6 w-6 fill-current mx-2" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="pinterest" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="svg-inline--fa fa-pinterest fa-w-16 fa-2x"><path fill="currentColor" d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z" class=""></path></svg>
186 | <svg class="h-6 w-6 fill-current mx-2" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="weixin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="svg-inline--fa fa-weixin fa-w-18 fa-2x"><path fill="currentColor" d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154zm-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4zm-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2zM563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4zm-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6zm107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6z" class=""></path></svg>
187 | <svg class="h-6 w-16 fill-current mx-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 26"><title>Carryology</title>
188 | 									<path d="M11.662 20.238c-.292 2.261-1.574 3.895-3.69 4.875-1.971.913-3.648.162-5.12-1.214-1.25-1.169-1.83-2.706-1.989-4.33-.359-3.669.402-7.121 2.386-10.266.998-1.583 2.396-2.694 4.198-3.147 1.571-.394 3.127-.224 4.1 1.29.986 1.534 1.123 3.224.288 4.871-.49.966-1.402 1.258-2.4.811-1.221-.547-.524-1.218-.173-2.028.466-1.077.86-2.587-.256-3.292-1.401-.885-2.402.451-3.076 1.5-2.285 3.556-2.73 7.531-1.935 11.564.577 2.927 2.941 3.438 5.125 1.299.707-.693 1.286-1.516 1.923-2.28l.619.347zM83.944 3.352c-.836.114-1.424.398-1.124 1.512.458 1.701-.454 3.133-1.177 4.569-.264.525-.633 1.261-1.263 1.064-.758-.237-.689-1.089-.587-1.772.139-.925.401-1.836.481-2.764.069-.807.269-1.848-1.005-1.942-1.381-.102-1.284.765-1.235 1.821.089 1.93-.467 3.641-2.682 4.721.148-1.774.195-3.303.425-4.804.182-1.19-.222-1.391-1.236-1.051-.371.125-.569.839-1.022.491-2.156-1.658-3.384.071-4.834 1.205-.984.77-1.821 1.473-3.116-.03-1.443-1.675-3.531-1.066-4.515 1.025-.392.834-.773 1.772-.781 2.667-.018 1.83-.974 2.73-2.784 3.452.138-1.502.213-2.765.379-4.017l1.014-7.08c.112-.847.202-1.923-1.004-1.933-1.135-.009-1.739.549-1.529 1.992.203 1.397-.081 2.884-.274 4.315-.27 1.998-1.879 2.626-3.492 1.429-1.858-1.379-3.87-.924-4.863 1.145-.766 1.596-.942 3.268-.335 4.962.78 2.176 2.986 2.712 4.69 1.127.906-.843 1.403-1.927 1.489-3.164.083-1.197.699-1.851 1.971-2.061 0 .548-.018 1.05.004 1.549.053 1.209-.914 2.742.502 3.531 1.457.812 2.471-.596 3.527-1.373.537-.395.8-.835 1.677-.263 2.314 1.512 3.972.852 5.163-1.744.365-.795.307-1.949 1.775-2.064.156 1.021.266 2.092 1.006 2.962.884 1.041 2.036.616 3.345.545l-1.039 1.196c-2.392 2.791-2.759 4.667-1.279 6.813.586.849 1.264 1.702 2.448 1.577 1.267-.134 1.54-1.237 1.801-2.211.555-2.074.506-4.219.646-6.345.163-2.471 1.771-3.351 3.847-2.172.953.541 1.801.266 2.668-.158 1.31.143.807.969.629 1.672-.161 1.61-.315 3.221-.484 4.83-.099.939.37 1.518 1.233 1.619.698.082 1.127-.511 1.13-1.134.028-4.861.358-9.694 1.074-14.504.111-.75-.395-1.323-1.264-1.205zM50.69 9.053c.322.014.63.153.671.693-.042.435-.512.44-.879.442-.276.002-.798-.222-.789-.301.057-.553.439-.859.997-.834zm.852 3.659c-.113.956-.416 1.965-1.558 1.93-.916-.028-1.006-.967-1.08-1.736-.127-1.314.818-.937 1.304-.908.861-.206 1.442-.195 1.334.714zm12.183-5.527c.5-.099.882.28.862.685-.02.43-.502.618-.947.669-.333.034-.747.067-.801-.34-.081-.601.366-.912.886-1.014zm1.018 3.792c-.102.852-.438 1.606-1.397 1.849-1.009-.098-1.092-.838-1.174-1.615-.102-.97.455-1.126 1.22-1.053.58.057 1.491-.345 1.351.819zm7.45 9.98c-1.412-2.121-.767-3.608.627-5.428.286 2.022.128 3.55-.627 5.428zm-.825-9.397c-1.336-.013-.923-1.348-1.164-1.987.126-1.459.187-3.25 1.5-3.35 1.288-.098 1.684 1.72 1.707 2.887.023 1.176-.605 2.464-2.043 2.45zm-9.402 5.41c-5.053.776-10.1 1.593-15.134 2.487-1.267.225-1.635-.011-1.593-1.339.083-2.652.407-5.269.786-7.886.133-.917.093-1.839-1.129-1.805-.958.026-1.503.431-1.166 1.664.432 1.581-.439 2.991-1.14 4.349-.285.552-.584 1.425-1.458 1.088-.676-.261-.465-1.041-.406-1.594.108-1.012.394-2.006.494-3.018.085-.863.076-1.83-1.191-1.8-1.137.027-1.188.643-1.123 1.71.152 2.505-.798 4.574-3.142 5.862-.755-1.024-.029-1.699.314-2.423.818-1.728.878-3.155-1.427-3.632-.366-.076-.635-.163-.74-.544-.266-.963-.653-1.966-1.884-1.449-1.158.485-1.32 1.555-1.188 2.787.237 2.201-1.477 5.206-3.343 6.12-.318-.853.248-1.469.554-2.146.767-1.697.935-3.173-1.395-3.681-.341-.074-.676-.072-.759-.492-.2-1.007-.596-1.982-1.819-1.494-1.154.46-1.364 1.537-1.253 2.781.214 2.398-1.14 4.183-2.532 6.45-.792-1.752-.393-2.993-.272-4.222.143-1.449-.703-2.472-1.818-3.019-1.101-.54-2.144.117-2.911 1.04-1.31 1.575-1.897 3.421-1.908 5.44-.014 2.632 1.31 3.358 3.596 2.064.551-.311.847-1.356 1.877-.507 1.576 1.299 2.729.277 3.517-1.075.768-1.317 1.365-2.741 1.943-4.156.334-.817.937-1.061 1.616-.812.878.321.276.972.12 1.487a7.998 7.998 0 0 1-.356.959c-.496 1.107-.606 2.221.451 3.014 1.145.859 2.259.395 3.259-.418 1.469-1.194 2.037-2.899 2.603-4.605.298-.897.576-2.055 1.822-1.546 1.304.533.147 1.429-.044 2.096-.337 1.177-.862 2.403.324 3.281 1.345.996 2.557.338 3.637-.694.363-.346.671-1.292 1.364-.552 1.277 1.365 2.67.855 4.035.205.405 2.255-.077 3.345-2.46 3.593-3.89.405-7.733 1.255-11.598 1.908-.789.133-1.749.348-1.602 1.267.196 1.224 1.208.507 1.867.395 3.78-.642 7.559-1.289 11.324-2.008 1.358-.259 2.421-.417 2.064 1.543-.159.87.175 1.615 1.133 1.631 1.108.018 1.111-.975 1.029-1.69-.221-1.925.799-2.434 2.472-2.714 6.267-1.046 12.514-2.213 19.016-3.379-1.467-1.34-3.009-.739-4.426-.521zm-43.858-1.7c-.107 1.577-.317 3.068-1.893 3.378-.884.174-.697-.979-.655-1.567.09-1.273.138-2.651 1.513-3.284.112-.05 1.465.596 1.035 1.473z"></path></svg>
189 | 		</div>
190 | 	</div>
191 | 
192 | 	<div class="flex justify-between items-center w-full border-t border-gray-500 py-4 px-8 xl:px-32 text-sm">
193 | 		<p class="text-gray-500">GOT A QUESTION? <span class="text-orange-700">SUPPORT@BELLROY.COM</span></p>
194 | 		<p class="text-gray-500">All rights reserved © 2019 Bellroy Pty Ltd</p>
195 | 	</div>
196 | </footer>
197 | 
198 | </body>
199 | </html>


--------------------------------------------------------------------------------
/youtube/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Tailwind YouTube</title>
  5 | 	<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  6 | 	<style>
  7 | 		.font-family{
  8 | 			"HelveticaNeue-Regular","Helvetica Neue Regular","Helvetica Neue",Helvetica,Arial,sans-serif
  9 | 		}
 10 | 	</style>
 11 | </head>
 12 | <body class="bg-gray-100">
 13 | <nav class="flex h-16 justify-between shadow-lg items-center bg-white text-gray-800 px-5 py-3 text-sm fixed top-0 left-0 right-0 z-10">
 14 | <div class="text-md flex items-center">
 15 | 	<svg class="fill-current mx-2 h-4 w-4 cursor-pointer text-gray-800" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 16 | 		<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
 17 | 			<g id="icon-shape">
 18 | 				<path d="M0,3 L20,3 L20,5 L0,5 L0,3 Z M0,9 L20,9 L20,11 L0,11 L0,9 Z M0,15 L20,15 L20,17 L0,17 L0,15 Z" id="Combined-Shape"></path>
 19 | 			</g>
 20 | 		</g>
 21 | 	</svg>
 22 | 	<p class="px-4  w-1/3 text-lg">
 23 | 		<svg viewBox="0 0 200 60" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope ytd-topbar-logo-renderer" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g viewBox="0 0 200 60" preserveAspectRatio="xMidYMid meet" class="style-scope ytd-topbar-logo-renderer">
 24 |         <g class="style-scope ytd-topbar-logo-renderer">
 25 |           <path fill="#FF0000" d="M63,14.87c-0.72-2.7-2.85-4.83-5.56-5.56C52.54,8,32.88,8,32.88,8S13.23,8,8.32,9.31
 26 |             c-2.7,0.72-4.83,2.85-5.56,5.56C1.45,19.77,1.45,30,1.45,30s0,10.23,1.31,15.13c0.72,2.7,2.85,4.83,5.56,5.56
 27 |             C13.23,52,32.88,52,32.88,52s19.66,0,24.56-1.31c2.7-0.72,4.83-2.85,5.56-5.56C64.31,40.23,64.31,30,64.31,30
 28 |             S64.31,19.77,63,14.87z" class="style-scope ytd-topbar-logo-renderer"></path>
 29 |           <polygon fill="#FFFFFF" points="26.6,39.43 42.93,30 26.6,20.57" class="style-scope ytd-topbar-logo-renderer"></polygon>
 30 |         </g>
 31 |         <g class="style-scope ytd-topbar-logo-renderer">
 32 |           <g id="youtube-paths" class="style-scope ytd-topbar-logo-renderer">
 33 |             <path fill="#282828" d="M92.69,48.03c-1.24-0.84-2.13-2.14-2.65-3.91c-0.52-1.77-0.79-4.12-0.79-7.06v-4
 34 |               c0-2.97,0.3-5.35,0.9-7.15c0.6-1.8,1.54-3.11,2.81-3.93c1.27-0.82,2.94-1.24,5.01-1.24c2.04,0,3.67,0.42,4.9,1.26
 35 |               c1.23,0.84,2.13,2.15,2.7,3.93c0.57,1.78,0.85,4.16,0.85,7.12v4c0,2.94-0.28,5.3-0.83,7.08c-0.55,1.78-1.45,3.09-2.7,3.91
 36 |               c-1.24,0.82-2.93,1.24-5.06,1.24C95.65,49.29,93.93,48.87,92.69,48.03z M99.66,43.71c0.34-0.9,0.52-2.37,0.52-4.4v-8.59
 37 |               c0-1.98-0.17-3.42-0.52-4.34c-0.34-0.91-0.95-1.37-1.82-1.37c-0.84,0-1.43,0.46-1.78,1.37c-0.34,0.91-0.52,2.36-0.52,4.34v8.59
 38 |               c0,2.04,0.16,3.51,0.49,4.4c0.33,0.9,0.93,1.35,1.8,1.35C98.71,45.06,99.31,44.61,99.66,43.71z" class="style-scope ytd-topbar-logo-renderer"></path>
 39 |             <path fill="#282828" d="M188.16,37.13v1.39c0,1.77,0.05,3.09,0.16,3.98c0.1,0.88,0.32,1.53,0.65,1.93
 40 |               c0.33,0.4,0.84,0.61,1.53,0.61c0.93,0,1.57-0.36,1.91-1.08c0.34-0.72,0.53-1.92,0.56-3.6l5.35,0.31
 41 |               c0.03,0.24,0.04,0.57,0.04,0.99c0,2.55-0.7,4.45-2.09,5.71c-1.39,1.26-3.36,1.89-5.91,1.89c-3.06,0-5.2-0.96-6.43-2.88
 42 |               c-1.23-1.92-1.84-4.88-1.84-8.9v-4.81c0-4.14,0.64-7.15,1.91-9.06c1.27-1.9,3.45-2.85,6.54-2.85c2.13,0,3.76,0.39,4.9,1.17
 43 |               c1.14,0.78,1.94,1.99,2.41,3.64c0.46,1.65,0.7,3.93,0.7,6.83v4.72H188.16z M188.95,25.53c-0.31,0.39-0.52,1.03-0.63,1.91
 44 |               c-0.11,0.88-0.16,2.23-0.16,4.02v1.98h4.54v-1.98c0-1.77-0.06-3.11-0.18-4.02c-0.12-0.91-0.34-1.56-0.65-1.93
 45 |               c-0.31-0.37-0.8-0.56-1.46-0.56C189.75,24.94,189.26,25.14,188.95,25.53z" class="style-scope ytd-topbar-logo-renderer"></path>
 46 |             <path fill="#282828" d="M77.59,36.61l-7.06-25.49h6.16l2.47,11.55c0.63,2.85,1.09,5.27,1.39,7.28h0.18
 47 |               c0.21-1.44,0.67-3.85,1.39-7.24l2.56-11.6h6.16L83.7,36.61v12.23h-6.11V36.61z" class="style-scope ytd-topbar-logo-renderer"></path>
 48 |             <path fill="#282828" d="M126.45,21.28v27.55h-4.85l-0.54-3.37h-0.13c-1.32,2.55-3.3,3.82-5.93,3.82c-1.83,0-3.18-0.6-4.05-1.8
 49 |               c-0.87-1.2-1.3-3.07-1.3-5.62V21.28h6.2v20.23c0,1.23,0.13,2.11,0.4,2.63c0.27,0.52,0.72,0.79,1.35,0.79
 50 |               c0.54,0,1.06-0.16,1.55-0.49c0.49-0.33,0.86-0.75,1.1-1.26V21.28H126.45z" class="style-scope ytd-topbar-logo-renderer"></path>
 51 |             <path fill="#282828" d="M158.27,21.28v27.55h-4.85l-0.54-3.37h-0.13c-1.32,2.55-3.3,3.82-5.93,3.82c-1.83,0-3.18-0.6-4.05-1.8
 52 |               c-0.87-1.2-1.3-3.07-1.3-5.62V21.28h6.2v20.23c0,1.23,0.13,2.11,0.4,2.63c0.27,0.52,0.72,0.79,1.35,0.79
 53 |               c0.54,0,1.06-0.16,1.55-0.49c0.49-0.33,0.86-0.75,1.1-1.26V21.28H158.27z" class="style-scope ytd-topbar-logo-renderer"></path>
 54 |             <path fill="#282828" d="M143.31,16.11h-6.16v32.72h-6.07V16.11h-6.16v-4.99h18.38V16.11z" class="style-scope ytd-topbar-logo-renderer"></path>
 55 |             <path fill="#282828" d="M178.8,25.69c-0.38-1.74-0.98-3-1.82-3.78c-0.84-0.78-1.99-1.17-3.46-1.17c-1.14,0-2.2,0.32-3.19,0.97
 56 |               c-0.99,0.64-1.75,1.49-2.29,2.54h-0.05l0-14.52h-5.98v39.11h5.12l0.63-2.61h0.13c0.48,0.93,1.2,1.66,2.16,2.2
 57 |               c0.96,0.54,2.02,0.81,3.19,0.81c2.1,0,3.64-0.97,4.63-2.9c0.99-1.93,1.48-4.95,1.48-9.06v-4.36
 58 |               C179.36,29.84,179.17,27.43,178.8,25.69z M173.11,36.93c0,2.01-0.08,3.58-0.25,4.72c-0.16,1.14-0.44,1.95-0.83,2.43
 59 |               c-0.39,0.48-0.91,0.72-1.57,0.72c-0.51,0-0.98-0.12-1.42-0.36c-0.43-0.24-0.79-0.6-1.06-1.08V27.71
 60 |               c0.21-0.75,0.57-1.36,1.08-1.84c0.51-0.48,1.06-0.72,1.66-0.72c0.63,0,1.12,0.25,1.46,0.74c0.34,0.49,0.58,1.33,0.72,2.49
 61 |               c0.13,1.17,0.2,2.83,0.2,4.99V36.93z" class="style-scope ytd-topbar-logo-renderer"></path>
 62 |           </g>
 63 |         </g>
 64 |       </g></svg>
 65 | 	</p>
 66 | 
 67 | </div>
 68 | <div class="text-md hidden md:block w-1/3 flex">
 69 | 	<input class="border border-gray-500 px-2 py-1 flex w-full" placeholder="Search" />
 70 | </div>
 71 | <div class="text-md flex items-center">
 72 | 	<a href="#">
 73 | 		<svg class="fill-current mx-2 h-4 w-4 cursor-pointer text-gray-600" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 74 | 				<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
 75 | 					<g id="icon-shape">
 76 | 						<path d="M8.02739671,2.33180314 C5.68271203,3.14769073 4,5.37733614 4,8 L4,14 L1,16 L1,17 L19,17 L19,16 L16,14 L16,8 C16,5.37733614 14.317288,3.14769073 11.9726033,2.33180314 C11.9906226,2.22388264 12,2.11303643 12,2 C12,0.8954305 11.1045695,0 10,0 C8.8954305,0 8,0.8954305 8,2 C8,2.11303643 8.0093774,2.22388264 8.02739671,2.33180314 L8.02739671,2.33180314 Z M12,18 C12,19.1045695 11.1045695,20 10,20 C8.8954305,20 8,19.1045695 8,18 L12,18 L12,18 Z" id="Combined-Shape"></path>
 77 | 					</g>
 78 | 				</g>
 79 | 		</svg>
 80 | 	</a>
 81 | 	<a class="bg-purple-800 rounded-full text-white w-8 h-8 flex items-center justify-center text-lg" href="#">t</a>
 82 | </div>
 83 | </nav>
 84 | 
 85 | <aside class="flex flex-col bg-gray-200 fixed top-0 left-0 bottom-0 mt-16 w-64 pt-4">
 86 | 	<a class="flex items-center hover:bg-gray-400 bg-gray-300 w-full px-4 py-3 text-sm" href="#"><span class="mx-4">
 87 | 		<svg class="fill-current h-4 w-4 cursor-pointer text-red-600" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 88 | 						<g id="Page-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
 89 | 							<g id="icon-shape">
 90 | 								<path d="M17,10 L20,10 L10,0 L0,10 L3,10 L3,20 L17,20 L17,10 Z M8,14 L12,14 L12,20 L8,20 L8,14 Z" id="Combined-Shape"></path>
 91 | 							</g>
 92 | 						</g>
 93 | 						</svg></span>Home</a>
 94 | 	<a class="flex items-center hover:bg-gray-300 w-full px-4 py-3 text-sm" href="#">
 95 | 		<span class="mx-4">
 96 | 			<svg class="fill-current h-4 w-4 cursor-pointer text-gray-600" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 97 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
 98 | 							<g id="icon-shape">
 99 | 								<path d="M10,0 C10,0 18,7.581722 18,12 C18,16.418278 14.418278,20 10,20 C5.581722,20 2,16.418278 2,12 C2,10.5071355 2.91332358,8.65311507 4.1227763,6.85242965 C4.49000818,8.09109989 5.63919601,9 7,9 C8.65348288,9 10,7.65825574 10,6.00313032 L10,0 Z M8,0 C6.34314575,0 5,1.34314575 5,3 C5,4.65685425 6.34314575,6 8,6 L8,0 Z" id="Combined-Shape"></path>				
100 | 							</g>
101 | 						</g>
102 | 						</svg>
103 | 					</span>
104 | 				Trending</a>
105 | 	<a class="flex items-center hover:bg-gray-300 w-full px-4 py-3 text-sm" href="#"><span class="mx-4"><svg class="fill-current h-4 w-4 cursor-pointer text-gray-600" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
106 | 						<g id="Page-1" stroke="inherit" stroke-width="1" fill="inherit" fill-rule="evenodd">
107 | 							<g id="icon-shape">
108 | 								<path d="M14,14 L18,14 L18,2 L2,2 L2,14 L6,14 L6,14.0020869 C6,15.1017394 6.89458045,16 7.99810135,16 L12.0018986,16 C13.1132936,16 14,15.1055038 14,14.0020869 L14,14 L14,14 Z M0,1.99079514 C0,0.891309342 0.898212381,0 1.99079514,0 L18.0092049,0 C19.1086907,0 20,0.898212381 20,1.99079514 L20,18.0092049 C20,19.1086907 19.1017876,20 18.0092049,20 L1.99079514,20 C0.891309342,20 0,19.1017876 0,18.0092049 L0,1.99079514 L0,1.99079514 Z M4,4 L16,4 L16,6 L4,6 L4,4 L4,4 Z M4,7 L16,7 L16,9 L4,9 L4,7 L4,7 Z M4,10 L16,10 L16,12 L4,12 L4,10 L4,10 Z" id="Combined-Shape"></path>
109 | 							</g>
110 | 						</g>
111 | 						</svg></span>Subscriptions</a>
112 | 	<hr class="bg-gray-400 h-px w-full">
113 | 	<a class="flex items-center hover:bg-gray-300 w-full px-4 py-3 text-sm" href="#"><span class="mx-4"><svg class="fill-current h-4 w-4 cursor-pointer text-gray-600" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
114 | 						<g id="Page-1" stroke="none" stroke-width="1" fill="inherit" fill-rule="evenodd">
115 | 							<g id="icon-shape">
116 | 								<path d="M0,3.99406028 C0,2.8927712 0.895857811,2 1.9973917,2 L9,2 L11,4 L18.0026083,4 C19.1057373,4 20,4.89706013 20,6.00585866 L20,15.9941413 C20,17.1019465 19.1017876,18 18.0092049,18 L1.99079514,18 C0.891309342,18 0,17.1054862 0,16.0059397 L0,3.99406028 Z" id="Rectangle-1"></path>
117 | 							</g>
118 | 						</g>
119 | 						</svg></span>Library</a>
120 | 	<a class="flex items-center hover:bg-gray-300 w-full px-4 py-3 text-sm" href="#"><span class="mx-4"><svg class="fill-current h-4 w-4 cursor-pointer text-gray-600" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
121 | 						<g id="Page-1" stroke="none" stroke-width="1" fill="inherit" fill-rule="evenodd">
122 | 							<g id="icon-shape">
123 | 								<polygon id="Combined-Shape" points="18 12 18 13 8 13 8 18 2 12 8 6 8 11 16 11 16 2 18 2"></polygon>
124 | 							</g>
125 | 						</g>
126 | 						</svg></span>History</a>
127 | 	<a class="flex items-center hover:bg-gray-300 w-full px-4 py-3 text-sm" href="#"><span class="mx-4"><svg class="fill-current h-4 w-4 cursor-pointer text-gray-600" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
128 | 						<g id="Page-1" stroke="none" stroke-width="1" fill="inherit" fill-rule="evenodd">
129 | 							<g id="icon-shape">
130 | 								<path d="M9,8.5 L9,4 L11,4 L11,9.58578644 L14.9497475,13.5355339 L13.5355339,14.9497475 L9,10.4142136 L9,8.5 Z M10,20 C15.5228475,20 20,15.5228475 20,10 C20,4.4771525 15.5228475,0 10,0 C4.4771525,0 0,4.4771525 0,10 C0,15.5228475 4.4771525,20 10,20 Z M10,18 C14.418278,18 18,14.418278 18,10 C18,5.581722 14.418278,2 10,2 C5.581722,2 2,5.581722 2,10 C2,14.418278 5.581722,18 10,18 Z" id="Combined-Shape"></path>
131 | 							</g>
132 | 						</g>
133 | 						</svg></span>Watch Later</a>
134 | 	<a class="flex items-center hover:bg-gray-300 w-full px-4 py-3 text-sm" href="#"><span class="mx-4"><svg class="fill-current h-4 w-4 cursor-pointer text-gray-600" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
135 | 						<g id="Page-1" stroke="none" stroke-width="1" fill="inherit" fill-rule="evenodd">
136 | 							<g id="icon-shape">
137 | 								<path d="M0,0 L20,0 L20,5 L0,5 L0,0 Z M0,7 L20,7 L20,11 L0,11 L0,7 Z M0,13 L20,13 L20,16 L0,16 L0,13 Z M0,18 L20,18 L20,20 L0,20 L0,18 Z" id="Combined-Shape"></path>
138 | 							</g>
139 | 						</g>
140 | 						</svg></span>Favorites</a>
141 | 	<a class="flex items-center hover:bg-gray-300 w-full px-4 py-3 text-sm" href="#"><span class="mx-4"><svg class="fill-current h-4 w-4 cursor-pointer text-gray-600" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
142 | 						<g id="Page-1" stroke="none" stroke-width="1" fill="inherit" fill-rule="evenodd">
143 | 							<g id="icon-shape">
144 | 								<path d="M11.0010436,0 C9.89589787,0 9.00000024,0.886706352 9.0000002,1.99810135 L9,8 L1.9973917,8 C0.894262725,8 0,8.88772964 0,10 L0,12 L2.29663334,18.1243554 C2.68509206,19.1602453 3.90195042,20 5.00853025,20 L12.9914698,20 C14.1007504,20 15,19.1125667 15,18.000385 L15,10 L12,3 L12,0 L11.0010436,0 L11.0010436,0 Z M17,10 L20,10 L20,20 L17,20 L17,10 L17,10 Z" id="Fill-97"></path>
145 | 							</g>
146 | 						</g>
147 | 						</svg></span>Liked Videos</a>
148 | 	<a class="flex items-center hover:bg-gray-300 w-full px-4 py-3 text-sm" href="#"><span class="mx-4"><svg class="fill-current h-4 w-4 cursor-pointer text-gray-600" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
149 | 						<g id="Page-1" stroke="none" stroke-width="1" fill="inherit" fill-rule="evenodd">
150 | 							<g id="icon-shape">
151 | 								<path d="M0,0 L20,0 L20,5 L0,5 L0,0 Z M0,7 L20,7 L20,11 L0,11 L0,7 Z M0,13 L20,13 L20,16 L0,16 L0,13 Z M0,18 L20,18 L20,20 L0,20 L0,18 Z" id="Combined-Shape"></path>
152 | 							</g>
153 | 						</g>
154 | 						</svg></span>Good Stuff</a>
155 | 	<hr class="bg-gray-400 h-px w-full">
156 | </aside>
157 | 
158 | <main class="h-screen mt-16 ml-64 px-12 xl:px-40 py-6">
159 | 	<div class="flex flex-col border-b border-gray-300">
160 | 	<p class="mb-4">Recommended</p>
161 | 	<div class="flex flex-row flex-wrap">
162 | 		<div class="mr-1 my-2">
163 | 			<img src="http://www.placecage.com/210/118"/>
164 | 			<p class="text-sm py-1">Some title for the video</p>
165 | 			<p class="text-xs text-gray-600">Some creator</p>
166 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
167 | 		</div>
168 | 		<div class="mr-1 my-2">
169 | 			<img src="http://www.fillmurray.com/210/118"/>
170 | 			<p class="text-sm py-1">Some title for the video</p>
171 | 			<p class="text-xs text-gray-600">Some creator</p>
172 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
173 | 		</div>
174 | 		<div class="mr-1 my-2">
175 | 			<img src="http://www.stevensegallery.com/210/118"/>
176 | 			<p class="text-sm py-1">Some title for the video</p>
177 | 			<p class="text-xs text-gray-600">Some creator</p>
178 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
179 | 		</div>
180 | 		<div class="mr-1 my-2">
181 | 			<img src="http://www.placekitten.com/210/118"/>
182 | 			<p class="text-sm py-1">Some title for the video</p>
183 | 			<p class="text-xs text-gray-600">Some creator</p>
184 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
185 | 		</div>
186 | 		<div class="mr-1 my-2">
187 | 			<img src="http://www.placecage.com/210/118"/>
188 | 			<p class="text-sm py-1">Some title for the video</p>
189 | 			<p class="text-xs text-gray-600">Some creator</p>
190 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
191 | 		</div>
192 | 		<div class="mr-1 my-2">
193 | 			<img src="http://www.fillmurray.com/210/118"/>
194 | 			<p class="text-sm py-1">Some title for the video</p>
195 | 			<p class="text-xs text-gray-600">Some creator</p>
196 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
197 | 		</div>
198 | 		<div class="mr-1 my-2">
199 | 			<img src="http://www.stevensegallery.com/210/118"/>
200 | 			<p class="text-sm py-1">Some title for the video</p>
201 | 			<p class="text-xs text-gray-600">Some creator</p>
202 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
203 | 		</div>
204 | 		<div class="mr-1 my-2">
205 | 			<img src="http://www.placekitten.com/210/118"/>
206 | 			<p class="text-sm py-1">Some title for the video</p>
207 | 			<p class="text-xs text-gray-600">Some creator</p>
208 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
209 | 		</div>
210 | 		<div class="mr-1 my-2">
211 | 			<img src="http://www.placecage.com/210/118"/>
212 | 			<p class="text-sm py-1">Some title for the video</p>
213 | 			<p class="text-xs text-gray-600">Some creator</p>
214 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
215 | 		</div>
216 | 		<div class="mr-1 my-2">
217 | 			<img src="http://www.fillmurray.com/210/118"/>
218 | 			<p class="text-sm py-1">Some title for the video</p>
219 | 			<p class="text-xs text-gray-600">Some creator</p>
220 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
221 | 		</div>
222 | 		<div class="mr-1 my-2">
223 | 			<img src="http://www.stevensegallery.com/210/118"/>
224 | 			<p class="text-sm py-1">Some title for the video</p>
225 | 			<p class="text-xs text-gray-600">Some creator</p>
226 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
227 | 		</div>
228 | 		<div class="mr-1 my-2">
229 | 			<img src="http://www.placekitten.com/210/118"/>
230 | 			<p class="text-sm py-1">Some title for the video</p>
231 | 			<p class="text-xs text-gray-600">Some creator</p>
232 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
233 | 		</div>	
234 | 		<div class="mr-1 my-2">
235 | 			<img src="http://www.placecage.com/210/118"/>
236 | 			<p class="text-sm py-1">Some title for the video</p>
237 | 			<p class="text-xs text-gray-600">Some creator</p>
238 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
239 | 		</div>
240 | 		<div class="mr-1 my-2">
241 | 			<img src="http://www.fillmurray.com/210/118"/>
242 | 			<p class="text-sm py-1">Some title for the video</p>
243 | 			<p class="text-xs text-gray-600">Some creator</p>
244 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
245 | 		</div>
246 | 		<div class="mr-1 my-2">
247 | 			<img src="http://www.stevensegallery.com/210/118"/>
248 | 			<p class="text-sm py-1">Some title for the video</p>
249 | 			<p class="text-xs text-gray-600">Some creator</p>
250 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
251 | 		</div>
252 | 		<div class="mr-1 my-2">
253 | 			<img src="http://www.placekitten.com/210/118"/>
254 | 			<p class="text-sm py-1">Some title for the video</p>
255 | 			<p class="text-xs text-gray-600">Some creator</p>
256 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
257 | 		</div>			
258 | 	</div>
259 | 	<a class="uppercase text-sm text-gray-600 my-4" href="#">show more</a>
260 | 	</div>
261 | 	<div class="flex flex-col border-b border-gray-300">
262 | 		<p class="my-4">Recently Uploaded <span class="text-xs text-gray-600">Recommended videos for you</span></p>
263 | 		<div class="flex flex-row flex-wrap">
264 | 		<div class="mr-1 my-2">
265 | 			<img src="http://www.stevensegallery.com/210/118"/>
266 | 			<p class="text-sm py-1">Some title for the video</p>
267 | 			<p class="text-xs text-gray-600">Some creator</p>
268 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
269 | 		</div>
270 | 		<div class="mr-1 my-2">
271 | 			<img src="http://www.placekitten.com/210/118"/>
272 | 			<p class="text-sm py-1">Some title for the video</p>
273 | 			<p class="text-xs text-gray-600">Some creator</p>
274 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
275 | 		</div>	
276 | 		<div class="mr-1 my-2">
277 | 			<img src="http://www.placecage.com/210/118"/>
278 | 			<p class="text-sm py-1">Some title for the video</p>
279 | 			<p class="text-xs text-gray-600">Some creator</p>
280 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
281 | 		</div>
282 | 		<div class="mr-1 my-2">
283 | 			<img src="http://www.fillmurray.com/210/118"/>
284 | 			<p class="text-sm py-1">Some title for the video</p>
285 | 			<p class="text-xs text-gray-600">Some creator</p>
286 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
287 | 		</div>
288 | 		<div class="mr-1 my-2">
289 | 			<img src="http://www.stevensegallery.com/210/118"/>
290 | 			<p class="text-sm py-1">Some title for the video</p>
291 | 			<p class="text-xs text-gray-600">Some creator</p>
292 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
293 | 		</div>
294 | 		<div class="mr-1 my-2">
295 | 			<img src="http://www.placekitten.com/210/118"/>
296 | 			<p class="text-sm py-1">Some title for the video</p>
297 | 			<p class="text-xs text-gray-600">Some creator</p>
298 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
299 | 		</div>		
300 | 		</div>
301 | 	</div>
302 | 	<div class="flex flex-col border-b border-gray-300">
303 | 		<div class="my-4 flex flex-row items-center justify-between">
304 | 			<div class="flex flex-row">
305 | 				<div class="bg-red-800 rounded-full text-white w-8 h-8 flex items-center justify-center text-lg mr-2"></div>
306 | 				<p class="">Science - Topic <span class="text-xs text-gray-600">Recommended videos for you</span></p>
307 | 			</div>
308 | 			<div class="flex flex-row items-center">
309 | 				<button class="bg-red-600 py-2 px-4 text-white uppercase text-sm cursor-pointer">Subscribe 474K</button>
310 | 				<p class="mx-2 uppercase text-gray-600">
311 | 					<svg class="fill-current mx-2 h-4 w-4 cursor-pointer text-gray-500" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
312 | 						<g id="Page-1" stroke="currentColor" stroke-width="1" fill="currentColor" fill-rule="evenodd">
313 | 							<g id="icon-shape">
314 | 								<polygon id="Combined-Shape" points="10 8.58578644 2.92893219 1.51471863 1.51471863 2.92893219 8.58578644 10 1.51471863 17.0710678 2.92893219 18.4852814 10 11.4142136 17.0710678 18.4852814 18.4852814 17.0710678 11.4142136 10 18.4852814 2.92893219 17.0710678 1.51471863 10 8.58578644"></polygon>
315 | 							</g>
316 | 						</g>
317 | 						</svg></p>
318 | 			</div>
319 | 		</div>
320 | 		<div class="flex flex-row flex-wrap">
321 | 		<div class="mr-1 my-2">
322 | 			<img src="http://www.stevensegallery.com/210/118"/>
323 | 			<p class="text-sm py-1">Some title for the video</p>
324 | 			<p class="text-xs text-gray-600">Some creator</p>
325 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
326 | 		</div>
327 | 		<div class="mr-1 my-2">
328 | 			<img src="http://www.placekitten.com/210/118"/>
329 | 			<p class="text-sm py-1">Some title for the video</p>
330 | 			<p class="text-xs text-gray-600">Some creator</p>
331 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
332 | 		</div>	
333 | 		<div class="mr-1 my-2">
334 | 			<img src="http://www.placecage.com/210/118"/>
335 | 			<p class="text-sm py-1">Some title for the video</p>
336 | 			<p class="text-xs text-gray-600">Some creator</p>
337 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
338 | 		</div>
339 | 		<div class="mr-1 my-2">
340 | 			<img src="http://www.fillmurray.com/210/118"/>
341 | 			<p class="text-sm py-1">Some title for the video</p>
342 | 			<p class="text-xs text-gray-600">Some creator</p>
343 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
344 | 		</div>
345 | 		<div class="mr-1 my-2">
346 | 			<img src="http://www.stevensegallery.com/210/118"/>
347 | 			<p class="text-sm py-1">Some title for the video</p>
348 | 			<p class="text-xs text-gray-600">Some creator</p>
349 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
350 | 		</div>
351 | 		<div class="mr-1 my-2">
352 | 			<img src="http://www.placekitten.com/210/118"/>
353 | 			<p class="text-sm py-1">Some title for the video</p>
354 | 			<p class="text-xs text-gray-600">Some creator</p>
355 | 			<p class="text-xs text-gray-600">458K views • 7 months ago</p>
356 | 		</div>		
357 | 		</div>
358 | 	</div>
359 | </main>
360 | 
361 | </body>
362 | </html>


--------------------------------------------------------------------------------
/twitter/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Twitter Tailwind</title>
  5 | 	<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  6 | </head>
  7 | <body class="flex min-h-screen justify-center">
  8 | 	<div class="px-3 py-1 min-h-screen border-r">
  9 | 		<div class="w-10 my-1 rounded-full hover:bg-gray-200 cursor-pointer p-2">
 10 | 			<svg viewBox="0 0 24 24" class="h-6 w-6 text-blue-400 fill-current cursor-pointer"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>
 11 | 		</div>
 12 | 		<div class="flex items-center my-1 rounded-full hover:bg-gray-200 cursor-pointer p-2 text-gray-700 hover:text-blue-400"><svg viewBox="0 0 24 24" class="h-6 w-6 fill-current cursor-pointer"><g><path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path></g></svg>
 13 | 		<div class="hidden lg:block ml-4 font-bold text-lg">Explore</div>
 14 | 		</div>
 15 | 		<div class="flex items-center my-1 rounded-full hover:bg-gray-200 cursor-pointer p-2 text-gray-700 hover:text-blue-400"><svg viewBox="0 0 24 24" class="h-6 w-6 fill-current cursor-pointer"><g><path d="M12 8.21c-2.09 0-3.79 1.7-3.79 3.79s1.7 3.79 3.79 3.79 3.79-1.7 3.79-3.79-1.7-3.79-3.79-3.79zm0 6.08c-1.262 0-2.29-1.026-2.29-2.29S10.74 9.71 12 9.71s2.29 1.026 2.29 2.29-1.028 2.29-2.29 2.29z"></path><path d="M12.36 22.375h-.722c-1.183 0-2.154-.888-2.262-2.064l-.014-.147c-.025-.287-.207-.533-.472-.644-.286-.12-.582-.065-.798.115l-.116.097c-.868.725-2.253.663-3.06-.14l-.51-.51c-.836-.84-.896-2.154-.14-3.06l.098-.118c.186-.222.23-.523.122-.787-.11-.272-.358-.454-.646-.48l-.15-.014c-1.18-.107-2.067-1.08-2.067-2.262v-.722c0-1.183.888-2.154 2.064-2.262l.156-.014c.285-.025.53-.207.642-.473.11-.27.065-.573-.12-.795l-.094-.116c-.757-.908-.698-2.223.137-3.06l.512-.512c.804-.804 2.188-.865 3.06-.14l.116.098c.218.184.528.23.79.122.27-.112.452-.358.477-.643l.014-.153c.107-1.18 1.08-2.066 2.262-2.066h.722c1.183 0 2.154.888 2.262 2.064l.014.156c.025.285.206.53.472.64.277.117.58.062.794-.117l.12-.102c.867-.723 2.254-.662 3.06.14l.51.512c.836.838.896 2.153.14 3.06l-.1.118c-.188.22-.234.522-.123.788.112.27.36.45.646.478l.152.014c1.18.107 2.067 1.08 2.067 2.262v.723c0 1.183-.888 2.154-2.064 2.262l-.155.014c-.284.024-.53.205-.64.47-.113.272-.067.574.117.795l.1.12c.756.905.696 2.22-.14 3.06l-.51.51c-.807.804-2.19.864-3.06.14l-.115-.096c-.217-.183-.53-.23-.79-.122-.273.114-.455.36-.48.646l-.014.15c-.107 1.173-1.08 2.06-2.262 2.06zm-3.773-4.42c.3 0 .593.06.87.175.79.328 1.324 1.054 1.4 1.896l.014.147c.037.4.367.7.77.7h.722c.4 0 .73-.3.768-.7l.014-.148c.076-.842.61-1.567 1.392-1.892.793-.33 1.696-.182 2.333.35l.113.094c.178.148.366.18.493.18.206 0 .4-.08.546-.227l.51-.51c.284-.284.305-.73.048-1.038l-.1-.12c-.542-.65-.677-1.54-.352-2.323.326-.79 1.052-1.32 1.894-1.397l.155-.014c.397-.037.7-.367.7-.77v-.722c0-.4-.303-.73-.702-.768l-.152-.014c-.846-.078-1.57-.61-1.895-1.393-.326-.788-.19-1.678.353-2.327l.1-.118c.257-.31.236-.756-.048-1.04l-.51-.51c-.146-.147-.34-.227-.546-.227-.127 0-.315.032-.492.18l-.12.1c-.634.528-1.55.67-2.322.354-.788-.327-1.32-1.052-1.397-1.896l-.014-.155c-.035-.397-.365-.7-.767-.7h-.723c-.4 0-.73.303-.768.702l-.014.152c-.076.843-.608 1.568-1.39 1.893-.787.326-1.693.183-2.33-.35l-.118-.096c-.18-.15-.368-.18-.495-.18-.206 0-.4.08-.546.226l-.512.51c-.282.284-.303.73-.046 1.038l.1.118c.54.653.677 1.544.352 2.325-.327.788-1.052 1.32-1.895 1.397l-.156.014c-.397.037-.7.367-.7.77v.722c0 .4.303.73.702.768l.15.014c.848.078 1.573.612 1.897 1.396.325.786.19 1.675-.353 2.325l-.096.115c-.26.31-.238.756.046 1.04l.51.51c.146.147.34.227.546.227.127 0 .315-.03.492-.18l.116-.096c.406-.336.923-.524 1.453-.524z"></path></g></svg>
 16 | 			<div class="hidden lg:block ml-4 font-bold text-lg">Settings</div></div>
 17 | 	</div>
 18 | 	<div class="w-full border-r" style="max-width: 600px;">
 19 | 		<div class="py-1 flex border-b w-full sticky top-0 bg-white">
 20 | 			<div class="mx-4 my-1 rounded-full hover:bg-gray-200 cursor-pointer p-2 text-blue-400">
 21 | 				<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current cursor-pointer"><g><path d="M20 11H7.414l4.293-4.293c.39-.39.39-1.023 0-1.414s-1.023-.39-1.414 0l-6 6c-.39.39-.39 1.023 0 1.414l6 6c.195.195.45.293.707.293s.512-.098.707-.293c.39-.39.39-1.023 0-1.414L7.414 13H20c.553 0 1-.447 1-1s-.447-1-1-1z"></path></g></svg>
 22 | 			</div>	
 23 | 			<div class="ml-1">
 24 | 				<div class="text-xl font-extrabold">Adam Wathan</div>
 25 | 				<div class="text-sm text-gray-600 leading-none">29.9K Tweets</div>
 26 | 			</div>
 27 | 		</div>
 28 | 		<div>
 29 | 			<img src="../twitter/img/header.jpeg" />
 30 | 		</div>
 31 | 		<div class="px-3">
 32 | 			<div class="flex items-center justify-between">
 33 | 				<img class="-mt-8 w-24 h-24 rounded-full border-2 border-white" src="../twitter/img/profile.jpg" />
 34 | 				<button class="h-10 px-4 text-md font-bold text-blue-400 border border-blue-400 rounded-full hover:bg-blue-100">Follow</button>
 35 | 			</div>
 36 | 			<div class="">
 37 | 				<div class="text-xl font-extrabold">Adam Wathan</div>
 38 | 				<div class="text-sm text-gray-600 leading-none">@adamwathan</div>
 39 | 				<div class="mt-2 text-sm">Creator of <span class="text-blue-400">@tailwindcss</span>. Host of <span class="text-blue-400">@fullstackradio</span>. Listener of Slayer. Austin 3:16.</div>
 40 | 				<div class="flex flex-wrap mt-2 text-gray-600 text-sm">
 41 | 					<div class="flex flex-no-wrap items-center">
 42 | 						<svg viewBox="0 0 20 20" fill="none" class="stroke-current stroke-1 flex flex-no-wrap w-4 h-4"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
 43 | 						<div class="ml-1">Cambridge, Ontario, Canada</div>
 44 | 					</div>
 45 | 					<div class="mx-2 flex items-center">
 46 | 						<svg viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path></svg>
 47 | 						<a href='http://adamwathan.me' class="ml-1 text-blue-400">adamwathan.me</a>
 48 | 					</div>
 49 | 					<div class="flex items-center">
 50 | 						<svg viewBox="0 0 20 20" fill="none" class="stroke-current w-4 h-4"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
 51 | 						<div class="ml-1">Joined July 2012</div>
 52 | 					</div>
 53 | 				</div>
 54 | 				<div class="mt-2 flex">
 55 | 					<div class="text-sm font-bold text-gray-900">643 <span class="font-normal text-gray-600">Following</span></div>
 56 | 					<div class="ml-4 text-sm font-bold text-gray-900">67.5K <span class="font-normal text-gray-600">Followers</span></div>
 57 | 				</div>
 58 | 			</div>
 59 | 		</div>
 60 | 		<div class="mt-4 flex w-full justify-around font-bold text-md text-gray-600 border-b border-gray-200 cursor-pointer">
 61 | 			<div class="text-blue-500 border-b-2 border-blue-400 py-3 flex flex-grow justify-center hover:bg-blue-100 hover:text-blue-500">Tweets</div>
 62 | 			<div class="py-3 flex flex-grow justify-center hover:bg-blue-100 hover:text-blue-500">Tweets & Replies</div>
 63 | 			<div class="py-3 flex flex-grow justify-center hover:bg-blue-100 hover:text-blue-500">Media</div>
 64 | 			<div class="py-3 flex flex-grow justify-center hover:bg-blue-100 hover:text-blue-500">Links</div>
 65 | 		</div>
 66 | 		<!-- Tweet Start -->
 67 | 		<div class="p-2 flex w-full border-b border-gray-200">
 68 | 			<div class="w-12" style="min-width: 3rem;"><img class="h-12 w-12 rounded-full" src="../twitter/img/profile.jpg" /></div>
 69 | 			<div class="ml-2 flex flex-grow flex-col">
 70 | 				<div class="flex items-baseline">
 71 | 					<div class="text-gray-900 font-bold">Adam Wathan</div>
 72 | 					<div class="ml-2 text-sm font-normal text-gray-600">@adamwathan · 14h</div>
 73 | 					<svg viewBox="0 0 20 20" fill="currentColor" class="ml-auto flex text-gray-600 w-4 h-4"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
 74 | 				</div>
 75 | 				<div class="text-sm">Got 20 chin-ups in one set for the first time ever tonight, has been a goal for 15 years 🙌🏻. Weight is 202 now, aiming for 185.</div>
 76 | 				<div class="mt-2 flex justify-around text-sm text-gray-600 cursor-pointer">
 77 | 					<div class="flex items-center flex-grow hover:text-blue-500">
 78 | 						<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><g><path d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z"></path></g></svg>
 79 | 					<span class="ml-2">18</span>
 80 | 					</div>
 81 | 					<div class="flex items-center flex-grow hover:text-green-500">
 82 | 						<svg viewBox="0 0 24 24" class="w-4 h-4 fill-current"><g><path d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z"></path></g>
 83 | 						</svg>
 84 | 						<span class="ml-2">1</span>
 85 | 					</div>
 86 | 					<div class="flex items-center flex-grow hover:text-red-500"><svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><g><path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"></path></g></svg>
 87 | 						<span class="ml-2">229</span>
 88 | 					</div>
 89 | 					<div class="flex items-center flex-grow  hover:text-blue-500"><svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><g><path d="M17.53 7.47l-5-5c-.293-.293-.768-.293-1.06 0l-5 5c-.294.293-.294.768 0 1.06s.767.294 1.06 0l3.72-3.72V15c0 .414.336.75.75.75s.75-.336.75-.75V4.81l3.72 3.72c.146.147.338.22.53.22s.384-.072.53-.22c.293-.293.293-.767 0-1.06z"></path><path d="M19.708 21.944H4.292C3.028 21.944 2 20.916 2 19.652V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 .437.355.792.792.792h15.416c.437 0 .792-.355.792-.792V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 1.264-1.028 2.292-2.292 2.292z"></path></g></svg></div>
 90 | 				</div>
 91 | 			</div>
 92 | 		</div>
 93 | 		<!-- Tweet ends -->
 94 | 		<!-- Tweet Start -->
 95 | 		<div class="p-2 flex w-full border-b border-gray-200">
 96 | 			<div class="w-12" style="min-width: 3rem;"><img class="h-12 w-12 rounded-full" src="../twitter/img/profile.jpg" /></div>
 97 | 			<div class="ml-2 flex flex-grow flex-col">
 98 | 				<div class="flex items-baseline">
 99 | 					<div class="text-gray-900 font-bold">Adam Wathan</div>
100 | 					<div class="ml-2 text-sm font-normal text-gray-600">@adamwathan · 15 Aug</div>
101 | 					<svg viewBox="0 0 20 20" fill="currentColor" class="ml-auto flex text-gray-600 w-4 h-4"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
102 | 				</div>
103 | 				<div class="text-sm">What's your favorite CSS feature that we don't have utilities for in Tailwind yet?</div>
104 | 				<div class="mt-2 flex justify-around text-sm text-gray-600 cursor-pointer">
105 | 					<div class="flex items-center flex-grow hover:text-blue-500">
106 | 						<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><g><path d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z"></path></g></svg>
107 | 					<span class="ml-2">124</span>
108 | 					</div>
109 | 					<div class="flex items-center flex-grow hover:text-green-500">
110 | 						<svg viewBox="0 0 24 24" class="w-4 h-4 fill-current"><g><path d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z"></path></g>
111 | 						</svg>
112 | 						<span class="ml-2">18</span>
113 | 					</div>
114 | 					<div class="flex items-center flex-grow hover:text-red-500"><svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><g><path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"></path></g></svg>
115 | 						<span class="ml-2">330</span>
116 | 					</div>
117 | 					<div class="flex items-center flex-grow  hover:text-blue-500"><svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><g><path d="M17.53 7.47l-5-5c-.293-.293-.768-.293-1.06 0l-5 5c-.294.293-.294.768 0 1.06s.767.294 1.06 0l3.72-3.72V15c0 .414.336.75.75.75s.75-.336.75-.75V4.81l3.72 3.72c.146.147.338.22.53.22s.384-.072.53-.22c.293-.293.293-.767 0-1.06z"></path><path d="M19.708 21.944H4.292C3.028 21.944 2 20.916 2 19.652V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 .437.355.792.792.792h15.416c.437 0 .792-.355.792-.792V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 1.264-1.028 2.292-2.292 2.292z"></path></g></svg></div>
118 | 				</div>
119 | 			</div>
120 | 		</div>
121 | 		<!-- Tweet ends -->
122 | 		<!-- Tweet Start -->
123 | 		<div class="p-2 flex w-full border-b border-gray-200">
124 | 			<div class="w-12" style="min-width: 3rem;"><img class="h-12 w-12 rounded-full" src="../twitter/img/profile.jpg" /></div>
125 | 			<div class="ml-2 flex flex-grow flex-col">
126 | 				<div class="flex items-baseline">
127 | 					<div class="text-gray-900 font-bold">Adam Wathan</div>
128 | 					<div class="ml-2 text-sm font-normal text-gray-600">@adamwathan · 11 Aug</div>
129 | 					<svg viewBox="0 0 20 20" fill="currentColor" class="ml-auto flex text-gray-600 w-4 h-4"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
130 | 				</div>
131 | 				<div class="text-sm">TypeScript is actually... fun.</div>
132 | 				<div class="mt-2 flex justify-around text-sm text-gray-600 cursor-pointer">
133 | 					<div class="flex items-center flex-grow hover:text-blue-500">
134 | 						<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><g><path d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z"></path></g></svg>
135 | 					<span class="ml-2">87</span>
136 | 					</div>
137 | 					<div class="flex items-center flex-grow hover:text-green-500">
138 | 						<svg viewBox="0 0 24 24" class="w-4 h-4 fill-current"><g><path d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z"></path></g>
139 | 						</svg>
140 | 						<span class="ml-2">44</span>
141 | 					</div>
142 | 					<div class="flex items-center flex-grow hover:text-red-500"><svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><g><path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"></path></g></svg>
143 | 						<span class="ml-2">1K</span>
144 | 					</div>
145 | 					<div class="flex items-center flex-grow  hover:text-blue-500"><svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><g><path d="M17.53 7.47l-5-5c-.293-.293-.768-.293-1.06 0l-5 5c-.294.293-.294.768 0 1.06s.767.294 1.06 0l3.72-3.72V15c0 .414.336.75.75.75s.75-.336.75-.75V4.81l3.72 3.72c.146.147.338.22.53.22s.384-.072.53-.22c.293-.293.293-.767 0-1.06z"></path><path d="M19.708 21.944H4.292C3.028 21.944 2 20.916 2 19.652V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 .437.355.792.792.792h15.416c.437 0 .792-.355.792-.792V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 1.264-1.028 2.292-2.292 2.292z"></path></g></svg></div>
146 | 				</div>
147 | 			</div>
148 | 		</div>
149 | 		<!-- Tweet ends -->
150 | 			<!-- Tweet Start -->
151 | 		<div class="p-2 flex w-full border-b border-gray-200">
152 | 			<div class="w-12" style="min-width: 3rem;"><img class="h-12 w-12 rounded-full" src="../twitter/img/profile.jpg" /></div>
153 | 			<div class="ml-2 flex flex-grow flex-col">
154 | 				<div class="flex items-baseline">
155 | 					<div class="text-gray-900 font-bold">Adam Wathan</div>
156 | 					<div class="ml-2 text-sm font-normal text-gray-600">@adamwathan · 11 Aug</div>
157 | 					<svg viewBox="0 0 20 20" fill="currentColor" class="ml-auto flex text-gray-600 w-4 h-4"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
158 | 				</div>
159 | 				<div class="text-sm">Everyone should write more. <br />I can't count the number of times I've solved a big problem for myself by spending 30 minutes to write it up clearly with the intent to use that writing to solicit feedback from others, then ultimately not needing to ask for feedback at all.</div>
160 | 				<div class="mt-2 flex justify-around text-sm text-gray-600 cursor-pointer">
161 | 					<div class="flex items-center flex-grow hover:text-blue-500">
162 | 						<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><g><path d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z"></path></g></svg>
163 | 					<span class="ml-2">44</span>
164 | 					</div>
165 | 					<div class="flex items-center flex-grow hover:text-green-500">
166 | 						<svg viewBox="0 0 24 24" class="w-4 h-4 fill-current"><g><path d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z"></path></g>
167 | 						</svg>
168 | 						<span class="ml-2">206</span>
169 | 					</div>
170 | 					<div class="flex items-center flex-grow hover:text-red-500"><svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><g><path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"></path></g></svg>
171 | 						<span class="ml-2">171</span>
172 | 					</div>
173 | 					<div class="flex items-center flex-grow  hover:text-blue-500"><svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><g><path d="M17.53 7.47l-5-5c-.293-.293-.768-.293-1.06 0l-5 5c-.294.293-.294.768 0 1.06s.767.294 1.06 0l3.72-3.72V15c0 .414.336.75.75.75s.75-.336.75-.75V4.81l3.72 3.72c.146.147.338.22.53.22s.384-.072.53-.22c.293-.293.293-.767 0-1.06z"></path><path d="M19.708 21.944H4.292C3.028 21.944 2 20.916 2 19.652V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 .437.355.792.792.792h15.416c.437 0 .792-.355.792-.792V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 1.264-1.028 2.292-2.292 2.292z"></path></g></svg></div>
174 | 				</div>
175 | 			</div>
176 | 		</div>
177 | 		<!-- Tweet ends -->
178 | 	</div>
179 | 	<div class="px-4 hidden lg:block" style="max-width: 350px;">
180 | 		<input class="w-full my-2 rounded-full bg-gray-200 text-sm px-4 py-1 outline-none border focus:border-blue-500 focus:bg-white" placeholder="Search Twitter" />
181 | 		<div class="mt-2 rounded-lg border p-3">
182 | 			<div class="text-lg font-extrabold text-gray-900">New to Twitter?</div>
183 | 			<div class="text-xs text-gray-600">Sign up now to get your own personalized timeline!</div>
184 | 			<button class="mt-2 py-2 text-white bg-blue-500 w-full rounded-full">Sign up</button>
185 | 		</div>
186 | 		<div class="mt-2 rounded-lg bg-gray-100">
187 | 			<div class="text-lg font-extrabold text-gray-900 p-3">You might like</div>
188 | 			<div class="p-3 flex items-center justify-between border-t cursor-pointer hover:bg-gray-200">
189 | 				<div class="flex items-center">
190 | 					<img class="rounded-full h-10 w-10" src="../twitter/img/tw.png" />
191 | 					<div class="ml-2 flex flex-col">
192 | 						<div class="leading-snug text-sm text-gray-900 font-bold">Tailwind CSS</div>
193 | 						<div class="leading-snug text-xs text-gray-600">@tailwindcss</div>
194 | 					</div>
195 | 				</div>
196 | 				<button class="h-8 px-3 text-md font-bold text-blue-400 border border-blue-400 rounded-full hover:bg-blue-100">Follow</button>
197 | 			</div>
198 | 			<div class="p-3 flex items-center justify-between border-t cursor-pointer hover:bg-gray-200">
199 | 				<div class="flex items-center">
200 | 					<img class="rounded-full h-10 w-10" src="../twitter/img/ss.jpg" />
201 | 					<div class="ml-2 flex flex-col">
202 | 						<div class="leading-snug text-sm text-gray-900 font-bold">Steve Schoger</div>
203 | 						<div class="leading-snug text-xs text-gray-600">@steveschoger</div>
204 | 					</div>
205 | 				</div>
206 | 				<button class="h-8 px-3 text-md font-bold text-blue-400 border border-blue-400 rounded-full hover:bg-blue-100">Follow</button>
207 | 			</div>
208 | 			<div class="p-3 flex items-center justify-between border-t cursor-pointer hover:bg-gray-200">
209 | 				<div class="flex items-center">
210 | 					<img class="rounded-full h-10 w-10" src="../twitter/img/to.jpg" />
211 | 					<div class="ml-2 flex flex-col">
212 | 						<div class="leading-snug text-sm text-gray-900 font-bold">Taylor Otwell</div>
213 | 						<div class="leading-snug text-xs text-gray-600">@taylorotwell</div>
214 | 					</div>
215 | 				</div>
216 | 				<button class="h-8 px-3 text-md font-bold text-blue-400 border border-blue-400 rounded-full hover:bg-blue-100">Follow</button>
217 | 			</div>
218 | 			<div class="p-3 flex items-center justify-between border-t cursor-pointer">
219 | 				<div class="text-blue-500 text-sm">Show more</div>
220 | 			</div>
221 | 		</div>
222 | 	</div>
223 | </body>
224 | </html>


--------------------------------------------------------------------------------
/helpscout/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Helpscout Tailwind</title>
  5 | 	<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  6 | 	<style>
  7 | 		/* The max width on the helpscout site is larger than tailwinds biggest max 
  8 | 		width. If this was being built and compiled rather than using the CDN
  9 | 		the extra class should extend tailwind rather than be here*/
 10 | 		.max-w-8xl{
 11 | 			max-width: 80rem;
 12 | 		}
 13 | 		/* Since the hero art is a solid jpg (no transparency) ive had to add 
 14 | 		the hero colour hero for use as a background otherwise it stands
 15 | 		out badly since Tailwind doesn't have the same colour. */
 16 | 		.bg-hero{
 17 | 			background: #f8faff;
 18 | 		}
 19 | 	</style>
 20 | </head>
 21 | <body class="">
 22 | 	<nav class="px-6 fixed w-full top-0 right-0 bg-hero flex items-center justify-center py-6 z-40">
 23 | 		<div class="flex justify-between items-center max-w-8xl w-full">
 24 | 			<div class="cursor-pointer">
 25 | 				<svg class="h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 842 168" role="img">
 26 | 				    <style>.st3{fill:#2a3b47}.st1{fill:#1292ee}</style>
 27 | 				    <path class="st3" d="M232 31.5l-.3.1v44.7h-42.4V31.6l-.3-.1c-6.3-1.3-12.5-1.3-18.7 0l-.3.1v102.8l.3.1c3.1.6 6.2 1 9.3 1s6.2-.3 9.4-1l.3-.1V92.7h42.4v41.7l.3.1c6.2 1.3 12.5 1.3 18.7 0l.3-.1V31.6l-.3-.1c-6.3-1.2-12.5-1.2-18.7 0zM297.7 60.4c-22.2 0-35.4 14-35.4 37.5 0 12.2 2.8 21.9 8.4 28.6 6.1 7.3 15.2 11 27.3 11 20.5 0 31-12.2 32.3-24.3v-.3l-.3-.1c-5.2-1.7-10-2.1-15.7-1.3h-.2v.2c-1.2 7.2-7.2 11.5-15.9 11.5-12.2 0-18.2-6.7-18.4-20.5h51.6v-.3c1.5-13.6-1.2-24.6-7.8-32.1-6.1-6.4-15-9.9-25.9-9.9zm-.2 13.3c5.1 0 9.4 1.6 12.3 4.7 3 3.2 4.5 8 4.2 13.7h-34.2c.3-11.7 6.8-18.4 17.7-18.4zM343.9 31.5l-.3.1v102.8l.3.1c2.9.6 5.8 1 8.8 1 2.9 0 5.9-.3 8.8-1l.3-.1V31.6l-.3-.1c-5.8-1.3-11.7-1.2-17.6 0zM412.4 60.4c-7.7 0-15.8 3-23.5 8.7l-1.1-5.4-.2-.1c-4.4-1.3-8-1.3-12.3 0l-.2.1V166l.3.1c2.9.6 5.8 1 8.8 1s5.9-.3 8.8-1l.3-.1v-34.2c6.1 3.9 12.6 5.7 19.9 5.7 20.2 0 32.3-14.3 32.3-38.4-.1-24.5-12.1-38.7-33.1-38.7zM393 80.7c5.4-3.7 10.4-5.4 15.8-5.4 12.3 0 19 8.5 19 24.1 0 15.3-6.6 23.4-19.2 23.4-5.4 0-10.5-1.7-15.6-5.3V80.7zM522.6 79.1c-3.1-1.2-5.9-2.2-8.6-3.1-14-5-22.4-8-22.6-15.6-.1-3.5 1-6.5 3.4-9 3.5-3.6 9.4-5.5 16.6-5.5 7.1 0 12.6 1.9 15.9 5.4 2.8 3 4 7.1 3.7 12.2v.3l.3.1c6.1 1.2 12.2 1.1 18.8-.4l.3-.1v-.3c.4-8.6-2.2-16.1-7.5-21.7-6.6-7-17.2-10.7-30.6-10.8h-.4c-24.9 0-39.9 11.1-40.1 29.7-.1 18.5 16.9 24.7 27.1 28.3l1.5.6c3.4 1.2 6.6 2.3 9.4 3.3 13.8 4.8 22.1 7.7 22.4 15 .1 3.8-1 6.9-3.3 9.3-3.3 3.4-9.1 5.1-16.8 5-8.5 0-15-2.2-18.7-6.2-2.7-3-3.8-6.8-3.4-11.4v-.3l-.3-.1c-6.2-1.2-12.5-1.1-18.7.3l-.2.1v.3c-.5 8.3 2 15.7 7.4 21.4 7.2 7.7 19 11.7 34.2 11.6 14.9 0 39.4-4 39.6-30-.3-17.3-15.1-22.9-29.4-28.4zM596.7 75.3c12.3 0 15.2 8 15.8 12.7v.3h.3c5.7.9 11.1.5 16.3-1l.3-.1v-.3c-.5-7.2-3.6-13.7-8.7-18.4-5.8-5.3-14.1-8.2-23.9-8.2-23.4 0-36.3 13.7-36.3 38.6 0 24.8 12.8 38.5 36 38.5 10 0 18.4-2.9 24.3-8.4 4.9-4.6 7.9-10.8 8.5-17.5v-.3l-.3-.1c-4.9-1.7-10.3-2-16.2-1h-.2v.2c-1.6 11.2-12.5 12-15.8 12-12.6 0-18.5-7.5-18.5-23.6-.1-15.9 5.8-23.4 18.4-23.4zM673.7 60.4c-23 0-35.7 13.7-35.7 38.6 0 24.8 12.7 38.5 35.7 38.5 23 0 35.7-13.7 35.7-38.5 0-24.9-12.7-38.6-35.7-38.6zM692 99.1c0 15.9-6 23.6-18.3 23.6s-18.3-7.7-18.3-23.6c0-16.2 5.8-23.8 18.3-23.8 12.3 0 18.3 7.8 18.3 23.8zM767 63.7l-.3.1V115c-5.8 5-11.1 7.2-17.2 7.2-8.6 0-12.3-4.9-12.3-16.5v-42l-.3-.1c-5.8-1.4-11.7-1.4-17.6 0l-.3.1v46.1c0 17.5 9.4 27.6 25.9 27.6 8.8 0 16.5-3.4 24.8-11l1.7 8 .2.1c4.2 1.1 8.6 1.1 12.8 0l.3-.1V63.7l-.3-.1c-5.6-1.4-11.5-1.4-17.4.1zM840.1 120.7l-.1-.3-.3.1c-7 1.6-11.1 1.5-13.5-.4-2-1.6-2.9-4.4-2.9-8.8V78.5h14.2l.1-.3c1-4.8 1-9.7 0-14.6l-.1-.3h-14.2V43.9l-.3-.1c-5.8-1.3-11.7-1.3-17.5 0l-.3.1.1 19.4h-9l-.1.3c-1.1 4.8-1.1 9.8 0 14.6l.1.3h9l.1 31.5c0 8.8.5 17.7 6.6 22.8 3.3 2.7 8.1 4.1 14.3 4.1 3.8 0 8.2-.5 13.3-1.5h.2l.1-.2c1.4-4.7 1.5-9.6.2-14.5z"/>
 28 | 				    <path class="st1" d="M10.9 97.2l48.6-48.6c6.3-6.2 10.2-14.9 10.2-24.4 0-9.4-3.8-18-9.9-24.2L11.2 48.6C4.9 54.8 1 63.5 1 73c0 9.5 3.8 18 9.9 24.2zM128.6 68.8L80 117.4c-6.3 6.2-10.2 14.9-10.2 24.4 0 9.4 3.8 18 9.9 24.2l48.6-48.6c6.3-6.2 10.2-14.9 10.2-24.4 0-9.5-3.8-18-9.9-24.2zM128.3 48.7c6.3-6.2 10.2-14.9 10.2-24.4 0-9.4-3.8-18-9.9-24.2L11.2 117.4C4.9 123.7 1 132.3 1 141.9c0 9.4 3.8 18 9.9 24.2L128.3 48.7z"/>
 29 | 				</svg>
 30 | 			</div>
 31 | 			<div class="hidden lg:flex flex-grow">
 32 | 				<a href="#" class="flex items-center ml-8 text-sm text-gray-700 font-light hover:text-gray-900">Product
 33 | 						<svg class="ml-1 h-4 w-4 fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 34 | 						<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
 35 | 							<g id="icon-shape">
 36 | 								<polygon id="Combined-Shape" points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8"></polygon></g>
 37 | 						</g>
 38 | 						</svg>
 39 | 				</a>
 40 | 				<a href="#" class="flex items-center ml-8 text-sm text-gray-700 font-light hover:text-gray-900">Resources
 41 | 						<svg class="ml-1 h-4 w-4 fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 42 | 						<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
 43 | 							<g id="icon-shape">
 44 | 								<polygon id="Combined-Shape" points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8"></polygon></g>
 45 | 						</g>
 46 | 						</svg>
 47 | 				</a>
 48 | 				<a href="#" class="flex items-center ml-8 text-sm text-gray-700 font-light hover:text-gray-900">Education
 49 | 						<svg class="ml-1 h-4 w-4 fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 50 | 						<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
 51 | 							<g id="icon-shape">
 52 | 								<polygon id="Combined-Shape" points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8"></polygon></g>
 53 | 						</g>
 54 | 						</svg>
 55 | 				</a>
 56 | 				<a href="#" class="flex items-center ml-8 text-sm text-gray-700 font-light hover:text-gray-900">Pricing</a>
 57 | 			</div>
 58 | 			<div>
 59 | 				<a href="#" class="text-sm text-gray-700 font-light hover:text-gray-900">Log in</a>
 60 | 				<a href="#" class="ml-4 px-4 py-3 text-sm text-white font-light bg-blue-500 rounded hover:bg-blue-400">Free Trial</a>
 61 | 			</div>
 62 | 		</div>
 63 | 	</nav>
 64 | 	<div class="flex pt-32 px-6 md:pt-0 lg:pt-12 items-center justify-center bg-hero md:h-screen overflow-hidden">
 65 | 		<div class="flex flex-col md:flex-row items-center max-w-8xl">
 66 | 			<div class="w-full md:w-1/2 lg:pr-32">
 67 | 				<h2 class="text-4xl lg:text-5xl text-center md:text-left text-blue-900 leading-tight font-medium">There’s a better way to talk with your customers.</h2>
 68 | 				<h3 class="mt-6 md:mt-10 text-md lg:text-xl text-center md:text-left text-gray-700 font-light tracking-wider leading-relaxed">Help Scout is designed with your customers in mind. Provide email and live chat with a personal touch, and deliver help content right where your customers need it, all in one place, all for one low price.</h3>
 69 | 				<div class="mt-10 flex flex-col sm:flex-row justify-center md:justify-start">
 70 | 					<button class="w-full sm:w-40 px-4 py-3 rounded font-semibold text-md bg-blue-500 text-white border-2 border-blue-500">Get started</button>
 71 | 					<button class="w-full mt-4 sm:mt-0 sm:ml-4 sm:w-40 px-4 py-3 rounded font-semibold text-md bg-white text-blue-500 border-2 border-gray-500">Watch a Demo</button>
 72 | 				</div>
 73 | 			</div>
 74 | 			<div class="w-full md:w-1/2 flex justify-end">
 75 | 				<img src="../helpscout/img/banner.jpg" />
 76 | 			</div>
 77 | 		</div>
 78 | 	</div>
 79 | 	<div class="mt-24 p-6">
 80 | 		<div class="w-full py-8">
 81 | 			<h3 class="w-full lg:w-1/3 m-auto text-center text-2xl md:text-3xl text-blue-900">Help Scout empowers customer-centric businesses with tools that make every interaction more human and helpful.</h3>
 82 | 			<hr class="my-8 border-blue-900 w-1/12 mx-auto">
 83 | 		</div>
 84 | 		<div class="flex flex-col-reverse md:flex-row m-auto max-w-8xl items-center justify-center">
 85 | 			<div class="w-full md:w-2/3">
 86 | 				<img src="../helpscout/img/1.png" />
 87 | 			</div>
 88 | 			<div class="mt-6 md:mt-0 w-full md:w-1/3">
 89 | 				<p class="text-2xl text-gray-500 font-light">Messaging</p>
 90 | 				<p class="mt-4 text-3xl text-blue-900">Look and feel matters</p>
 91 | 				<p class="py-6 text-gray-600">Replace robo-emails and ticket numbers with emails that were clearly sent by a real person. Fast, friendly, and above all, customer-first.</p>
 92 | 				<a class="mt-4 text-blue-500" href="#">More about the help desk ></a>
 93 | 			</div>
 94 | 		</div>
 95 | 		<div class="mt-12 md:mt-32 flex flex-col md:flex-row m-auto max-w-8xl items-top justify-center">
 96 | 			<div class="w-full md:w-1/3">
 97 | 				<div>
 98 | 					<p class="text-2xl text-gray-500 font-light">Docs</p>
 99 | 					<p class="mt-4 text-3xl text-blue-900">Make impressive help docs in minutes</p>
100 | 					<p class="py-6 text-gray-600">Anyone on your team can build out articles that answer common customer questions. Make Docs public or private—it’s all in your control.</p>
101 | 					<a class="mt-4 text-blue-500" href="#">More about Docs ></a>
102 | 				</div>
103 | 				<div class="hidden md:block w-2/3 mt-20">
104 | 					<img class="" src="../helpscout/img/3.jpg" />
105 | 				</div>
106 | 			</div>
107 | 			<div class="mt-12 md:mt-0 md:ml-12 relative w-full md:w-2/3 px-8 pb-24">
108 | 				<img class="absolute bottom-0 left-0 h-64 z-0" src="../helpscout/img/dots.jpg" />
109 | 				<img class="relative z-20 shadow md:mx-10" src="../helpscout/img/2.png" />
110 | 			</div>
111 | 		</div>
112 | 
113 | 
114 | 		<div class="mt-12 md:mt-32 flex flex-col-reverse md:flex-row m-auto max-w-8xl items-top justify-center">
115 | 			<div class="mt-12 md:mt-0 md:mr-12 relative w-full md:w-2/3 md:pb-24">
116 | 				<img class="relative shadow" src="../helpscout/img/graph.jpg" />
117 | 			</div>
118 | 			<div class="w-full md:w-1/3">
119 | 				<div>
120 | 					<p class="text-2xl text-gray-500 font-light">Reporting</p>
121 | 					<p class="mt-4 text-3xl text-blue-900">Look smarter in meetings</p>
122 | 					<p class="py-6 text-gray-600">Intuitive, built-in reports make for valuable “aha” moments with your team and your boss. No coding or customizations required.</p>
123 | 					<a class="mt-4 text-blue-500" href="#">More about Reporting ></a>
124 | 				</div>
125 | 				<div class="hidden lg:block w-2/3 mt-20 mx-auto">
126 | 					<img class="h-48" src="../helpscout/img/bag.png" />
127 | 				</div>
128 | 			</div>
129 | 		</div>
130 | 		<div class="mt-12 mx-auto w-full lg:w-2/5 text-center">
131 | 			<p class="text-xl text-gray-600 font-light">Integrations</p>
132 | 			<p class="mt-4 text-3xl text-blue-900 font-semibold">Connect Help Scout with all the things</p>
133 | 			<p class="py-6 text-gray-600">Explore 50+ integrations that make your day-to-day workflow more efficient and familiar. Our extensive developer tools might also strike your fan</p>
134 | 		</div>
135 | 
136 | 		<div class="mt-6 flex flex-wrap max-w-8xl px-8 justify-end m-auto">
137 | 			<div class="p-2 w-full md:w-1/4 lg:w-1/5 bg-gray-200 md:bg-white my-2">
138 | 				<div class="w-full h-full flex justify-center items-center cursor-pointer hover:bg-gray-200">
139 | 					<img class="" src="../helpscout/img/slack.png" />
140 | 				</div>
141 | 			</div>
142 | 			<div class="p-2 w-full md:w-1/4 lg:w-1/5 bg-gray-200 md:bg-white my-2">
143 | 				<div class="w-full h-full flex relative justify-center items-center cursor-pointer hover:bg-gray-200">
144 | 					<p class="absolute top-0 left-0 p-1 rounded-tl-lg rounded-br-lg uppercase text-white text-xs tracking-wide font-semibold bg-indigo-300">plus</p>
145 | 					<img class="" src="../helpscout/img/hubspot.png" />
146 | 				</div>
147 | 			</div>
148 | 			<div class="p-2 w-full md:w-1/4 lg:w-1/5 bg-gray-200 md:bg-white my-2">
149 | 				<div class="w-full h-full flex justify-center items-center cursor-pointer hover:bg-gray-200">
150 | 					<img class="" src="../helpscout/img/mailchimp.png" />
151 | 				</div>
152 | 			</div>
153 | 			<div class="p-2 w-full md:w-1/4 lg:w-1/5 bg-gray-200 md:bg-white my-2">
154 | 				<div class="w-full h-full flex relative justify-center items-center cursor-pointer hover:bg-gray-200">
155 | 					<p class="absolute top-0 left-0 p-1 rounded-tl-lg rounded-br-lg uppercase text-white text-xs tracking-wide font-semibold bg-indigo-300">plus</p>
156 | 					<img class="" src="../helpscout/img/salesforce.png" />
157 | 				</div>
158 | 			</div>
159 | 			<div class="p-2 w-full md:w-1/4 lg:w-1/5 bg-gray-200 md:bg-white my-2">
160 | 				<div class="w-full h-full flex justify-center items-center cursor-pointer hover:bg-gray-200">
161 | 					<img class="" src="../helpscout/img/woocommerce.png" />
162 | 				</div>
163 | 			</div>
164 | 			<div class="p-2 w-full md:w-1/4 lg:w-1/5 bg-gray-200 md:bg-white my-2">
165 | 				<div class="w-full h-full flex relative justify-center items-center cursor-pointer hover:bg-gray-200">
166 | 					<p class="absolute top-0 left-0 p-1 rounded-tl-lg rounded-br-lg uppercase text-white text-xs tracking-wide font-semibold bg-indigo-300">plus</p>
167 | 					<img class="" src="../helpscout/img/jira.png" />
168 | 				</div>
169 | 			</div>
170 | 			<div class="p-2 w-full md:w-1/4 lg:w-1/5 bg-gray-200 md:bg-white my-2">
171 | 				<div class="w-full h-full flex justify-center items-center cursor-pointer hover:bg-gray-200">
172 | 					<img class="" src="../helpscout/img/shopify.png" />
173 | 				</div>
174 | 			</div>
175 | 			<div class="p-2 w-full md:w-1/4 lg:w-1/5 bg-gray-200 md:bg-white my-2">
176 | 				<div class="w-full h-full flex justify-center items-center cursor-pointer hover:bg-gray-200">
177 | 					<p class="text-sm text-blue-500">View all integrations</p>
178 | 				</div>
179 | 			</div>
180 | 		</div>
181 | <div class="mt-24 flex flex-col-reverse md:flex-row items-center justify-center w-full max-w-8xl mx-auto">
182 | 	<div class="w-full md:w-1/2 p-4">
183 | 		<div class="shadow-lg rounded overflow-hidden">
184 | 			<img class="" src="../helpscout/img/customer.png" />
185 | 			<div class="bg-white p-12">
186 | 				<p class="font-light text-xl italic font-gray-800">"I'm not sure how I would be able to do support - at Zapier or anywhere else - without Help Scout."</p>
187 | 				<p class="mt-4 font-light text-sm text-gray-500">Hoon, Customer Support Pro</p>
188 | 				<p class="mt-1 font-semibold text-sm text-gray-900">Zapier</p>
189 | 			</div>
190 | 		</div>
191 | 	</div>
192 | 	<div class="flex justify-center items-center w-full md:w-1/2 p-2">
193 | 		<div class="flex flex-col justify-between w-full md:w-3/5">
194 | 			<div class="flex flex-col items-center md:items-start">
195 | 				<h3 class="text-center md:text-left text-blue-900 font-semibold text-3xl">Trusted by more than 9,000 businesses in 140 countries.</h3>
196 | 				<button class="mt-4 rounded border-2 border-gray-400 hover:border-blue-500 text-md font-semibold text-blue-500 py-3 px-4">Meet out customers</button>
197 | 			</div>
198 | 			<div class="mt-6 md:mt-12 flex flex-wrap">
199 | 				<img class="w-1/3 py-2"  src="../helpscout/img/customer-logos/grubhub.png" />
200 | 				<img class="w-1/3 py-2"  src="../helpscout/img/customer-logos/trello.png" />
201 | 				<img class="w-1/3 py-2"  src="../helpscout/img/customer-logos/pocket.png" />
202 | 				<img class="w-1/3 py-2"  src="../helpscout/img/customer-logos/buffer.png" />
203 | 				<img class="w-1/3 py-2"  src="../helpscout/img/customer-logos/tuftandneedle.png" />
204 | 				<img class="w-1/3 py-2"  src="../helpscout/img/customer-logos/tradesy.png" />
205 | 			</div>
206 | 		</div>
207 | 	</div>
208 | </div>
209 | 	</div>
210 | 
211 | 
212 | 
213 | 
214 | <div class="p-6 mt-12 md:mt-24 flex justify-center w-full bg-hero">
215 | 	<div class="flex flex-col items-center w-full max-w-8xl">
216 | 		<div class="flex flex-col justify-center">
217 | 			<h3 class="text-blue-900 font-semibold text-center text-3xl">Our people make the difference.</h3>
218 | 			<p class="mt-6 text-gray-600 text-lg text-center leading-normal font-light">We’re an extension of your customer service team, and all of our resources are free</p>			
219 | 		</div>
220 | 		<div class="mt-12 flex flex-col lg:flex-row w-full">
221 | 			<div class="w-full lg:w-2/5 flex flex-col justify-center">
222 | 				<div class="flex items-center">
223 | 					<div class="h-32 w-32 p-4">
224 | 						<img src="../helpscout/img/trophy.jpg">
225 | 					</div>
226 | 					<div class="flex flex-col">
227 | 						<p class="text-lg text-blue-500">World class 24x6 Support</p>
228 | 						<p class="mt-4 text-gray-500">These friendly and knowledgeable folks are available via email and chat.</p>
229 | 					</div>
230 | 				</div>
231 | 				<div class="mt-6 flex items-center">
232 | 					<div class="h-32 w-32 p-4">
233 | 						<img src="../helpscout/img/laptop.jpg">
234 | 					</div>
235 | 					<div class="flex flex-col">
236 | 						<p class="text-lg text-blue-500">Training & Classes</p>
237 | 						<p class="mt-4 text-gray-500">Weekly resources designed to help you get the most out of Help Scout.</p>
238 | 					</div>
239 | 				</div>
240 | 				<div class="mt-6 flex items-center">
241 | 					<div class="h-32 w-32 p-4">
242 | 						<img src="../helpscout/img/books.jpg">
243 | 					</div>
244 | 					<div class="flex flex-col">
245 | 						<p class="text-lg text-blue-500">Education from HelpU</p>
246 | 						<p class="mt-4 text-gray-500">We’ll teach your team how to master the craft of customer service.</p>
247 | 					</div>
248 | 				</div>
249 | 			</div>
250 | 			<div class="w-full lg:w-3/5 flex justify-center lg:justify-end">
251 | 				<img src="../helpscout/img/people.jpg">
252 | 			</div>
253 | 		</div>
254 | 	</div>
255 | </div>
256 | 
257 | 	<div class="mt-12 md:mt-32 lg:mt-12 w-full lg:w-2/5 m-auto flex flex-col items-center bg-white p-10">
258 | 		<h3 class="text-blue-900 font-semibold text-center text-3xl">Get started with Help Scout</h3>
259 | 		<p class="mt-6 text-gray-600 text-lg text-center leading-normal font-light">A better experience for your customers, fewer headaches for your team.
260 | 		<br>You'll be set up in minutes.</p>
261 | 		<div class="mt-6 flex flex-col md:flex-row w-full md:px-8">
262 | 			<input class="flex flex-grow px-4 py-2 rounded text-gray-500 border border-gray-500" placeholder="Email Address">
263 | 			<button class="mt-2 md:mt-0 md:ml-2 bg-blue-500 shadow-lg rounded text-white px-4 py-3">Get Started</button>
264 | 		</div>
265 | 		<p class="mt-6 text-gray-500">See Help Scout in action.<a class="ml-2 text-blue-500" href="#">Get a Demo</a></p>
266 | 	</div>
267 | 	<div class="flex justify-center">
268 | 		<div class="flex justify-end w-full max-w-8xl">
269 | 			<img class="-mb-4" src="../helpscout/img/reading.png"/>
270 | 		</div>
271 | 	</div>
272 | 	<footer class="flex justify-center w-full bg-gray-900 px-6">
273 | 		<div class="w-full mt-12 max-w-8xl">
274 | 			<div class="flex flex-col md:flex-row text-center md:text-left">
275 | 				<div class="flex flex-col items-center md:items-start w-full md:w-2/6 border-b pb-8 md:pb-0 md:border-none border-gray-600">
276 | 					<a href="#">
277 | 						<svg class="h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137.5 166" role="img"><path fill="#1292ee" class="logo-mark--st0" d="M9.9 97.2l48.6-48.6c6.3-6.2 10.2-14.9 10.2-24.4 0-9.4-3.8-18-9.9-24.2L10.2 48.6C3.9 54.8 0 63.5 0 73c0 9.5 3.8 18 9.9 24.2zM127.6 68.8L79 117.4c-6.3 6.2-10.2 14.9-10.2 24.4 0 9.4 3.8 18 9.9 24.2l48.6-48.6c6.3-6.2 10.2-14.9 10.2-24.4 0-9.5-3.8-18-9.9-24.2zM127.3 48.7s0-.1 0 0c6.3-6.2 10.2-14.9 10.2-24.4 0-9.4-3.8-18-9.9-24.2L10.2 117.4C3.9 123.6 0 132.3 0 141.8c0 9.4 3.8 18 9.9 24.2L127.3 48.7z"></path></svg>
278 | 					</a>
279 | 					<p class="mt-2 text-2xl font-light text-gray-100">Tools for the world's most customer-centric businesses</p>
280 | 					<img class="hidden md:block my-10 w-16" src="../helpscout/img/certified.png"/>
281 | 				</div>
282 | 				<div class="flex flex-col w-full md:w-1/6 md:ml-8">
283 | 					<p class="mt-6 md:mt-0 text-md text-white">Features</p>
284 | 					<a href="#" class="mt-4 text-sm font-light text-gray-600 hover:text-gray-300">Help Desk</a>
285 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Knowledge Base</a>
286 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Live Chat</a>
287 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Integrations</a>
288 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Reports</a>
289 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">iOS & Android</a>
290 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Messages <span class="ml-1 px-1 font-semibold text-white text-xs bg-blue-500 rounded">COMING SOON</span></a>
291 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">More Features</a>
292 | 				</div>
293 | 				<div class="flex flex-col w-full md:w-1/6 md:ml-8">
294 | 					<p class="mt-6 md:mt-0 text-md text-white">Learn</p>
295 | 					<a href="#" class="mt-4 text-sm font-light text-gray-600 hover:text-gray-300">Customer Support Skills</a>
296 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Designing Knowledge Bases</a>
297 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Chat & Messaging</a>
298 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Customer Support Benchmarks</a>
299 | 				</div>
300 | 				<div class="flex flex-col w-full md:w-1/6 md:ml-8">
301 | 					<p class="mt-6 md:mt-0 text-md text-white">About Us</p>
302 | 					<a href="#" class="mt-4 text-sm font-light text-gray-600 hover:text-gray-300">Careers</a>
303 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Help Scout for Good</a>
304 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Brand Handbook</a>
305 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Terms & Privacy</a>
306 | 				</div>
307 | 				<div class="flex flex-col w-full md:w-1/6 md:ml-8">
308 | 					<p class="mt-6 md:mt-0 text-md text-white">Get Help</p>
309 | 					<a href="#" class="mt-4 text-sm font-light text-gray-600 hover:text-gray-300">Developers </a>
310 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Help Docs </a>
311 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Free Training</a>
312 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Contact Sales</a>
313 | 					<a href="#" class="mt-2 text-sm font-light text-gray-600 hover:text-gray-300">Status<span class="ml-1 px-1 font-semibold text-gray-400 text-xs bg-gray-600 rounded">99.99%</span></a>
314 | 				</div>
315 | 			</div>
316 | 			<div class="mt-6 flex flex-col md:flex-row items-center justify-between py-4 w-full border-t border-gray-600">
317 | 				<div class="flex text-gray-600">
318 | 					<a class="text-gray-600" href="#">
319 | 						<svg class="h-6 w-6 fill-current" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-285.9 385.7 26.5 22" xml:space="preserve" role="img"><path fill="#8d98a1" d="M-269.3,386c-2.4,0.9-3.9,3.1-3.7,5.6l0.1,0.9l-1-0.1c-3.5-0.4-6.5-2-9.1-4.5l-1.3-1.3l-0.3,0.9c-0.7,2.1-0.2,4.3,1.2,5.7 c0.8,0.8,0.6,0.9-0.7,0.4c-0.5-0.2-0.9-0.3-0.9-0.2c-0.1,0.1,0.3,1.9,0.7,2.6c0.5,1,1.5,1.9,2.6,2.5l0.9,0.4l-1.1,0 c-1.1,0-1.1,0-1,0.4c0.4,1.3,1.9,2.6,3.6,3.2l1.2,0.4l-1,0.6c-1.5,0.9-3.3,1.4-5.1,1.4c-0.9,0-1.6,0.1-1.6,0.2 c0,0.2,2.3,1.3,3.7,1.7c4.1,1.3,8.9,0.7,12.6-1.4c2.6-1.5,5.2-4.6,6.4-7.5c0.7-1.6,1.3-4.4,1.3-5.8c0-0.9,0.1-1,1.1-2.1 c0.6-0.6,1.2-1.3,1.3-1.5c0.2-0.4,0.2-0.4-0.8,0c-1.6,0.6-1.9,0.5-1.1-0.4c0.6-0.6,1.3-1.7,1.3-2.1c0-0.1-0.3,0-0.6,0.2 c-0.3,0.2-1.1,0.5-1.7,0.7l-1,0.3l-0.9-0.6c-0.5-0.3-1.2-0.7-1.6-0.9C-266.9,385.6-268.4,385.7-269.3,386z"></path></svg></a>
320 | 					<a href="#">
321 | 						<svg class="ml-4 h-6 w-6 fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#8d98a1"><path d="M20,3.33355556 C20,1.582 18.4186667,0 16.6666667,0 L3.33333333,0 C1.58133333,0 0,1.582 0,3.33355556 L0,16.6664444 C0,18.418 1.58133333,20 3.33355556,20 L10,20 L10,12.4444444 L7.55555556,12.4444444 L7.55555556,9.11111111 L10,9.11111111 L10,7.81244444 C10,5.57266667 11.6817778,3.55555556 13.75,3.55555556 L16.4444444,3.55555556 L16.4444444,6.88888889 L13.75,6.88888889 C13.4551111,6.88888889 13.1111111,7.24688889 13.1111111,7.78311111 L13.1111111,9.11111111 L16.4444444,9.11111111 L16.4444444,12.4444444 L13.1111111,12.4444444 L13.1111111,20 L16.6666667,20 C18.4186667,20 20,18.418 20,16.6664444 L20,3.33355556 Z"></path></g></g></svg>
322 | 					</a>
323 | 					<a href="#">
324 | 						<svg class="ml-4 h-6 w-6 fill-current" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#8d98a1"><path d="M10.7358299,9.05316505 C10.74693,9.03496505 10.7625302,9.01306505 10.7778304,8.99176505 L10.7778304,9.05316505 L10.7358299,9.05316505 Z M16.9563347,16.7413593 L13.9355007,16.7413593 L13.9355007,11.9100805 C13.9355007,10.696181 13.4977552,9.86785022 12.4052981,9.86785022 C11.5695643,9.86785022 11.0734621,10.4266736 10.8556124,10.9662 C10.7748894,11.1588913 10.7548946,11.4283987 10.7548946,11.6975342 L10.7548946,16.7411734 L7.73457208,16.7411734 C7.73457208,16.7411734 7.77409657,8.5583491 7.73457208,7.71146523 L10.7553596,7.71146523 L10.7553596,8.99162555 C11.1563705,8.37649203 11.8729729,7.4990119 13.477156,7.4990119 C15.4654707,7.4990119 16.9563347,8.78884399 16.9563347,11.5636639 L16.9563347,16.7413593 Z M4.55280357,6.47798976 L4.53248332,6.47798976 C3.51912172,6.47798976 2.86222458,5.78497064 2.86222458,4.91734826 C2.86222458,4.03224231 3.53841897,3.35800873 4.57186832,3.35800873 C5.60541067,3.35800873 6.24115058,4.03205632 6.26123833,4.91734826 C6.26123833,5.78515663 5.60564317,6.47798976 4.55280357,6.47798976 Z M3.0415728,16.7413593 L6.06342984,16.7413593 L6.06342984,7.71160472 L3.0415728,7.71160472 L3.0415728,16.7413593 Z M18.5232253,0 L1.4777512,0 C0.661547082,0 0,0.641358883 0,1.43295561 L0,18.5664399 C0,19.3580366 0.661779579,20 1.4777512,20 L18.5232253,20 C19.3391969,20 20,19.3576181 20,18.5664399 L20,1.43295561 C20,0.641591377 19.3391969,0 18.5232253,0 Z"></path></g></g></svg>
325 | 					</a>
326 | 				</div>
327 | 				<div class="flex flex-col md:flex-row text-center text-gray-600">
328 | 					<img class="hidden md:block" src="../helpscout/img/footer.png"/>
329 | 					<p class="mt-4 md:mt-0 ml-2 text-sm text-gray-400">Made by hand in over 60 cities around the world.</p>
330 | 					<p class="mt-4 md:mt-0 ml-2 text-sm font-light">© 2019 Help Scout</p>
331 | 					<img class="mx-auto mt-4 md:hidden my-10 w-16" src="../helpscout/img/certified.png"/>
332 | 				</div>
333 | 			</div>
334 | 		</div>
335 | 	</footer>
336 | </body>
337 | </html>


--------------------------------------------------------------------------------