Slack Clone

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>

slack-clone.markdown

Slack Clone

A Pen by Josh Manders on CodePen.

License.

styles

<link href="https://unpkg.com/tailwindcss@0.3.0/dist/tailwind.min.css" rel="stylesheet" />