Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/index.html

Created July 20, 2020 03:18
Show Gist options
  • Save neisdev/b7f6c58e23f752e7a7260b77264fd9e3 to your computer and use it in GitHub Desktop.
Save neisdev/b7f6c58e23f752e7a7260b77264fd9e3 to your computer and use it in GitHub Desktop.
Download ZIP
Slack Clone
Raw
index.html
<div class="font-sans antialiased h-screen flex">
<!-- Sidebar / channel list -->
<div class="bg-blue-darkest flex-none w-24 p-6 hidden md:block">
<div class="mb-4">
<div class="bg-white opacity-75 h-12 w-12 flex items-center justify-center text-black text-2xl font-semibold rounded-lg mb-1">
<img src="https://slack-files2.s3-us-west-2.amazonaws.com/avatars/2016-03-24/29297563060_eef11070e05270f88b0b_44.png" class="rounded" />
</div>
<div class="text-center text-white opacity-50 text-sm">&#8984;1</div>
</div>
<div class="mb-4">
<div class="bg-white opacity-25 h-12 w-12 flex items-center justify-center text-black text-2xl font-semibold rounded-lg mb-1">
<img src="https://slack-files2.s3-us-west-2.amazonaws.com/avatars/2017-11-24/278033213606_ca2c153f351b406d2a34_88.png" class="rounded-lg" />
</div>
<div class="text-center text-white opacity-50 text-sm">&#8984;2</div>
</div>
<div class="cursor-pointer">
<div class="bg-white opacity-25 h-12 w-12 flex items-center justify-center text-black text-2xl font-semibold rounded-lg mb-1 overflow-hidden">
<svg class="fill-current h-10 w-10 block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16 10c0 .553-.048 1-.601 1H11v4.399c0 .552-.447.601-1 .601-.553 0-1-.049-1-.601V11H4.601C4.049 11 4 10.553 4 10c0-.553.049-1 .601-1H9V4.601C9 4.048 9.447 4 10 4c.553 0 1 .048 1 .601V9h4.399c.553 0 .601.447.601 1z"/></svg>
</div>
</div>
</div>
<div class="bg-blue-darker flex-none w-64 pb-6 hidden md:block">
<div class="text-white mb-2 mt-3 px-4 flex justify-between">
<div class="flex-auto">
<h1 class="font-semibold text-xl leading-tight mb-1 truncate">Burntcow </h1>
<div class="flex items-center mb-6">
<span class="bg-green rounded-full block w-2 h-2 mr-2"></span>
<span class="text-white opacity-50 text-sm">Josh Manders</span>
</div>
</div>
<div>
<svg class="h-6 w-6 fill-current text-white opacity-25" viewBox="0 0 20 20">
<path d="M14 8a4 4 0 1 0-8 0v7h8V8zM8.027 2.332A6.003 6.003 0 0 0 4 8v6l-3 2v1h18v-1l-3-2V8a6.003 6.003 0 0 0-4.027-5.668 2 2 0 1 0-3.945 0zM12 18a2 2 0 1 1-4 0h4z" fill-rule="evenodd"/>
</svg>
</div>
</div>
<div class="mb-8">
<div class="px-4 mb-2 text-white flex justify-between items-center">
<div class="opacity-75">Channels</div>
<div>
<svg class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11 9h4v2h-4v4H9v-4H5V9h4V5h2v4zm-1 11a10 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 16z"/></svg>
</div>
</div>
<div class="bg-blue-dark py-1 px-4 text-white"># general</div>
</div>
<div class="mb-8">
<div class="px-4 mb-2 text-white flex justify-between items-center">
<div class="opacity-75">Direct Messages</div>
<div>
<svg class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11 9h4v2h-4v4H9v-4H5V9h4V5h2v4zm-1 11a10 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 16z"/></svg>
</div>
</div>
<div class="flex items-center mb-3 px-4">
<span class="bg-green rounded-full block w-2 h-2 mr-2"></span>
<span class="text-white opacity-75">Josh Manders <span class="text-grey text-sm">(you)</span></span>
</div>
<div class="flex items-center px-4 mb-3 opacity-50">
<span class="border border-white rounded-full w-2 h-2 mr-2"></span>
<span class="text-white">Chad Winterfield</span>
</div>
<div class="flex items-center px-4">
<span class="bg-green rounded-full block w-2 h-2 mr-2"></span>
<span class="text-white opacity-75">Kyle Robinson</span>
</div>
</div>
<div>
<div class="px-4 mb-2 text-white flex justify-between items-center">
<div class="opacity-75">Apps</div>
<div>
<svg class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11 9h4v2h-4v4H9v-4H5V9h4V5h2v4zm-1 11a10 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 16z"/></svg>
</div>
</div>
</div>
</div>
<!-- Chat content -->
<div class="w-full flex flex-col bg-white">
<!-- Top bar -->
<div class="border-b flex px-6 py-2 items-center flex-none">
<div class="flex flex-col">
<h3 class="text-grey-darkest mb-1 font-extrabold">#general</h3>
<div class="text-grey-dark text-sm">
Chit-chattin' about ugly HTML and mixing of concerns.
</div>
</div>
<div class="ml-auto hidden md:block">
<div class="relative">
<input type="search" placeholder="Search" class="appearance-none border border-grey rounded-lg pl-8 pr-4 py-2">
<div class="absolute pin-y pin-l pl-3 flex items-center justify-center">
<svg class="fill-current text-grey h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
</div>
</div>
</div>
</div>
<!-- Chat messages -->
<div class="px-6 py-4 flex-1 overflow-y-scroll">
<!-- A message -->
<div class="flex items-start mb-4 text-sm">
<img src="https://ca.slack-edge.com/T037T7E5P-U052CUTJC-g683b295c5aa-72" class="w-10 h-10 rounded mr-3">
<div class="flex flex-col">
<div class="flex items-end">
<span class="font-bold mr-2 ">Josh Manders</span>
<span class="text-grey text-xs ">11:46</span>
</div>
<p class=" text-black pt-1">The slack from the other side.</p>
</div>
</div>
<!-- A message -->
<div class="flex items-start mb-4 text-sm">
<img src="https://ca.slack-edge.com/T037T7E5P-U7G91SK3K-44846b51b731-72" class="w-10 h-10 rounded mr-3" />
<div class="flex flex-col">
<div class="flex items-end">
<span class="font-bold mr-2 ">Brandon Nifong</span>
<span class="text-grey text-xs ">12:45</span>
</div>
<p class=" text-black pt-1">How are we supposed to control the marquee space without an utility for it? I propose this:</p>
<div class="bg-grey-lighter border border-grey-light text-grey-darkest text-sm font-mono rounded p-3 mt-2 whitespace-pre">.marquee-lightspeed { -webkit-marquee-speed: fast; }
.marquee-lightspeeder { -webkit-marquee-speed: faster; }</div>
</div>
</div>
<!-- A message -->
<div class="flex items-start mb-4 text-sm">
<img src="https://ca.slack-edge.com/T037T7E5P-U037T7E5R-g1ff22fc4f5a-72" class="w-10 h-10 rounded mr-3" />
<div class="flex flex-col">
<div class="flex items-end">
<span class="font-bold mr-2 ">Kyle Robinson</span>
<span class="text-grey text-xs ">12:46</span>
</div>
<p class=" text-black pt-1"><a href="#" class="inline-block bg-blue-lightest text-blue no-underline">@Brandon</a> the size of the generated CSS is creating a singularity in space/time, we must stop adding more utilities before it's too late!</p>
</div>
</div>
</div>
<div class="pb-6 px-4 flex-none">
<div class="flex items-center rounded-lg border-2 border-grey">
<span class="text-3xl text-grey border-r-2 border-grey p-2">
<svg class="fill-current h-6 w-6 block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16 10c0 .553-.048 1-.601 1H11v4.399c0 .552-.447.601-1 .601-.553 0-1-.049-1-.601V11H4.601C4.049 11 4 10.553 4 10c0-.553.049-1 .601-1H9V4.601C9 4.048 9.447 4 10 4c.553 0 1 .048 1 .601V9h4.399c.553 0 .601.447.601 1z"/></svg>
</span>
<input type="text" class="w-full px-4" placeholder="Message #general"/>
</div>
</div>
</div>
</div>
Raw
styles
<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment