- Published on
Ways To Make A Zen Desk Clone With Tailwind CSS In 60 Minutes
Tags
- What is Tailwind CSS?
- The description of Zen Desk Clone ui component
- Why use Tailwind CSS to create a Zen Desk Clone ui component?
- The preview of Zen Desk Clone ui component
- The source code of Zen Desk Clone ui component
- How to create a Zen Desk Clone with Tailwind CSS?
- Install tailwind css of verion 1.3.4
- All the unility class needed to create a Zen Desk Clone component
- 123 steps to create a Zen Desk Clone component with Tailwind CSS
- Conclusion
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.
The description of Zen Desk Clone ui component
Zendesk clone. semi responsive layout for desktop application. dashboard / help desk style.
note that the preview here breaks the layout somewhat. it on a real page is not scrolling down like that but has and scroll bars for sidebar and main section.
Why use Tailwind CSS to create a Zen Desk Clone ui component?
- It can make the building process of Zen Desk Clone ui component faster and more easily.
- Enables building complex responsive layouts and components freely.
- Minimum lines of CSS code in Zen Desk Clone component file.
The preview of Zen Desk Clone ui component
Free download of the Zen Desk Clone's source code
The source code of Zen Desk Clone ui component
<!DOCTYPE html>
<html class="h-full" lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="stylesheet" href="./tailwind.css" />
<title>Chi Desk</title>
<style>
html {
font-size: 14px;
line-height: 1.285;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial,
sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
/* can be configured in tailwind.config.js */
.group:hover .group-hover\:block {
display: block;
}
.focus\:cursor-text:focus {
cursor: text;
}
.focus\:w-64:focus {
width: 16rem;
}
/* zendesk styles */
.h-16 {
height: 50px;
}
.bg-teal-900 {
background: #03363d;
}
.bg-gray-100 {
background: #f8f9f9;
}
.hover\:border-green-500:hover {
border-color: #78a300;
}
</style>
</head>
<body class="antialiased h-full">
<!-- you can clone or fork the repo if you want -->
<!-- https://github.com/bluebrown/tailwind-zendesk-clone -->
<div class="h-full w-full flex overflow-hidden antialiased text-gray-800 bg-white">
<!-- section body side nav -->
<nav aria-label="side bar" aria-orientation="vertical" class="flex-none flex flex-col items-center text-center bg-teal-900 text-gray-400 border-r">
<div class="h-16 flex items-center w-full">
<img class="h-6 w-6 mx-auto" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/leaves.png" />
</div>
<ul>
<li>
<a title="Home" href="#home" class="h-16 px-6 flex items-center text-white bg-teal-700 w-full">
<i class="mx-auto">
<svg class="fill-current h-5 w-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 6.453l9 8.375v9.172h-6v-6h-6v6h-6v-9.172l9-8.375zm12 5.695l-12-11.148-12 11.133 1.361 1.465 10.639-9.868 10.639 9.883 1.361-1.465z" />
</svg>
</i>
</a>
</li>
<li>
<a title="Views" href="#views" class="h-16 px-6 flex items-center hover:text-white w-full">
<i class="mx-auto">
<svg class="fill-current h-5 w-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M18.546 3h-13.069l-5.477 8.986v9.014h24v-9.014l-5.454-8.986zm-3.796 12h-5.5l-2.25-3h-4.666l4.266-7h10.82l4.249 7h-4.669l-2.25 3zm-9.75-4l.607-1h12.787l.606 1h-14zm12.18-3l.607 1h-11.573l.607-1h10.359zm-1.214-2l.606 1h-9.144l.607-1h7.931z" />
</svg>
</i>
</a>
</li>
<li>
<a title="Customer Lists" href="#customer-lists" class="h-16 px-6 flex items-center hover:text-white w-full">
<i class="mx-auto">
<svg class="fill-current h-5 w-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 7.001c0 3.865-3.134 7-7 7s-7-3.135-7-7c0-3.867 3.134-7.001 7-7.001s7 3.134 7 7.001zm-1.598 7.18c-1.506 1.137-3.374 1.82-5.402 1.82-2.03 0-3.899-.685-5.407-1.822-4.072 1.793-6.593 7.376-6.593 9.821h24c0-2.423-2.6-8.006-6.598-9.819z" />
</svg>
</i>
</a>
</li>
<li>
<a title="Reporting" href="#reporting" class="h-16 px-6 flex items-center hover:text-white w-full">
<i class="mx-auto">
<svg class="fill-current h-5 w-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M5 19h-4v-4h4v4zm6 0h-4v-8h4v8zm6 0h-4v-13h4v13zm6 0h-4v-19h4v19zm1 2h-24v2h24v-2z" />
</svg>
</i>
</a>
</li>
<li>
<a title="Admin" href="#admin" class="h-16 px-6 flex items-center hover:text-white w-full">
<i class="mx-auto">
<svg class="fill-current h-5 w-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z" />
</svg>
</i>
</a>
</li>
</ul>
<div class="mt-auto h-16 flex items-center w-full">
<img style="filter: invert(85%);" class="h-8 w-10 mx-auto" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/chi.png" />
</div>
</nav>
<div class="flex-1 flex flex-col">
<!-- section body top nav -->
<nav aria-label="top bar" class="flex-none flex justify-between bg-white h-16">
<!-- top bar left -->
<ul aria-label="top bar left" aria-orientation="horizontal" class="flex">
<!-- add button -->
<li class="group relative">
<button aria-controls="add" aria-expanded="false" aria-haspopup="listbox" class="flex items-center h-full px-4 text-sm">
<i>
<svg class="fill-current w-3 h-3 mx-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M24 10h-10v-10h-2v10h-10v2h10v10h2v-10h10z" />
</svg>
</i>
<span class="ml-2">Add</span>
</button>
<span class="absolute p-1 hidden group-hover:block">
<ul id="add" role="listbox" class="outline-none py-2 bg-white border rounded-md w-screen max-w-md w-dropdown-large shadow-lg focus:outline-none leading-relaxed">
<li role="separator" class="mb-2">
<label class="block px-4 py-3 font-semibold">
New
</label>
<hr />
</li>
<li role="option" class="px-6 py-1 my-1 focus:outline-none focus:bg-blue-100 hover:bg-blue-100 cursor-pointer">
Ticket
</li>
<li role="option" class="px-6 py-1 my-1 focus:outline-none focus:bg-blue-100 hover:bg-blue-100 cursor-pointer">
User
</li>
<li role="option" class="px-6 py-1 my-1 focus:outline-none focus:bg-blue-100 hover:bg-blue-100 cursor-pointer">
Organization
</li>
<li role="option" class="px-6 py-1 my-1 focus:outline-none focus:bg-blue-100 hover:bg-blue-100 cursor-pointer">
Search
</li>
<li role="separator" class="mb-2">
<label class="block px-4 py-3 font-semibold">Recently Viewed</label>
<hr />
</li>
<li role="option" class="px-6 py-1 my-1 focus:outline-none focus:bg-blue-100 hover:bg-blue-100 cursor-pointer">
<div class="flex">
<div class="pr-2">
<span style="padding: 2px 5px; font-size: 0.7rem;" class="font-mono rounded-sm bg-red-600 text-white leading-none">O</span>
</div>
<div class="flex-1">
<p>Vertias - ams opps issue</p>
<p class="text-gray-600">
<span>#ticket/14352</span>
<span class="mx-1 font-black">·</span>
<span>Nico Braun</span>
</p>
</div>
</div>
</li>
<li role="option" class="px-6 py-1 my-1 focus:outline-none focus:bg-blue-100 hover:bg-blue-100 cursor-pointer">
<div class="flex">
<div class="pr-2">
<span style="padding: 2px 5px; font-size: 0.7rem;" class="font-mono rounded-sm bg-yellow-400 text-black leading-none">N</span>
</div>
<div class="flex-1">
<p>Vertias - ams opps issue</p>
<p class="text-gray-600">
<span>#ticket/14352</span>
<span class="mx-1 font-black">·</span>
<span>Nico Braun</span>
</p>
</div>
</div>
</li>
<li role="option" class="px-6 py-1 my-1 focus:outline-none focus:bg-blue-100 hover:bg-blue-100 cursor-pointer">
<div class="flex">
<div class="pr-2">
<span style="padding: 2px 5px; font-size: 0.7rem;" class="font-mono rounded-sm bg-gray-500 text-white leading-none">S</span>
</div>
<div class="flex-1">
<p>Vertias - ams opps issue</p>
<p class="text-gray-600">
<span>#ticket/14352</span>
<span class="mx-1 font-black">·</span>
<span>Nico Braun</span>
</p>
</div>
</div>
</li>
<li role="option" class="px-6 py-1 my-1 focus:outline-none focus:bg-blue-100 hover:bg-blue-100 cursor-pointer">
<div class="flex">
<div class="pr-2">
<span style="padding: 2px 5px; font-size: 0.7rem;" class="font-mono rounded-sm bg-blue-600 text-white leading-none">P</span>
</div>
<div class="flex-1">
<p>Vertias - ams opps issue</p>
<p class="text-gray-600">
<span>#ticket/14352</span>
<span class="mx-1 font-black">·</span>
<span>Nico Braun</span>
</p>
</div>
</div>
</li>
<li role="option" class="px-6 py-1 my-1 focus:outline-none focus:bg-blue-100 hover:bg-blue-100 cursor-pointer">
<div class="flex">
<div class="pr-2">
<span style="padding: 2px 5px; font-size: 0.7rem;" class="font-mono rounded-sm bg-gray-800 text-white leading-none">H</span>
</div>
<div class="flex-1">
<p>Vertias - ams opps issue</p>
<p class="text-gray-600">
<span>#ticket/14352</span>
<span class="mx-1 font-black">·</span>
<span>Nico Braun</span>
</p>
</div>
</div>
</li>
</ul>
</span>
</li>
</ul>
<!-- to bar right -->
<ul aria-label="top bar right" aria-orientation="horizontal" class="px-8 flex items-center">
<li class="relative">
<input title="Search Bar" aria-label="search bar" role="search" class="pr-8 pl-4 py-2 rounded-md cursor-pointer transition-all duration-300 ease-in-out focus:border-black focus:cursor-text w-4 focus:w-64 placeholder-transparent focus:placeholder-gray-500" type="text" placeholder="Search Chi Desk Support" />
<i class="pointer-events-none absolute top-0 right-0 h-full flex items-center pr-3">
<svg class="fill-current w-4 h-4 mx-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M21.172 24l-7.387-7.387c-1.388.874-3.024 1.387-4.785 1.387-4.971 0-9-4.029-9-9s4.029-9 9-9 9 4.029 9 9c0 1.761-.514 3.398-1.387 4.785l7.387 7.387-2.828 2.828zm-12.172-8c3.859 0 7-3.14 7-7s-3.141-7-7-7-7 3.14-7 7 3.141 7 7 7z" />
</svg>
</i>
</li>
<li class="h-8 w-8 ml-3">
<button title="Notifications" aria-label="notifications" class="w-full h-full text-white bg-gray-600 rounded-md focus:outline-none focus:shadow-outline">
<i>
<svg class="fill-current w-4 h-4 mx-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M15.137 3.945c-.644-.374-1.042-1.07-1.041-1.82v-.003c.001-1.172-.938-2.122-2.096-2.122s-2.097.95-2.097 2.122v.003c.001.751-.396 1.446-1.041 1.82-4.667 2.712-1.985 11.715-6.862 13.306v1.749h20v-1.749c-4.877-1.591-2.195-10.594-6.863-13.306zm-3.137-2.945c.552 0 1 .449 1 1 0 .552-.448 1-1 1s-1-.448-1-1c0-.551.448-1 1-1zm3 20c0 1.598-1.392 3-2.971 3s-3.029-1.402-3.029-3h6z" />
</svg>
</i>
</button>
</li>
<li class="h-8 w-8 ml-3">
<button title="v2 REPL" aria-label="repl" class="w-full h-full text-white bg-gray-600 rounded-md focus:outline-none focus:shadow-outline">
<i>
<svg class="fill-current w-4 h-4 mx-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M22 6v16h-20v-16h20zm2-6h-24v24h24v-24zm-11 11v1.649l3.229 1.351-3.229 1.347v1.653l5-2.201v-1.599l-5-2.2zm-7 2.201v1.599l5 2.2v-1.653l-3.229-1.347 3.229-1.351v-1.649l-5 2.201z" />
</svg>
</i>
</button>
</li>
<li class="h-8 w-8 ml-3">
<button title="Products" aria-label="chi desk products" class="w-full h-full rounded-md focus:outline-none focus:shadow-outline">
<i class="text-gray-600">
<svg class="fill-current w-5 h-5 mx-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M11 11h-11v-11h11v11zm13 0h-11v-11h11v11zm-13 13h-11v-11h11v11zm13 0h-11v-11h11v11z" />
</svg>
</i>
</button>
</li>
<li class="h-10 w-10 ml-3">
<button title="Page Menu" aria-label="page menu" class="h-full w-full rounded-full border focus:outline-none focus:shadow-outline">
<img class="h-full w-full rounded-full mx-auto" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/me.jpg" />
</button>
</li>
</ul>
</nav>
<!-- section body header -->
<header aria-label="page caption" class="flex-none flex h-16 bg-gray-100 border-t px-4 items-center">
<h1 id="page-caption" class="font-semibold text-lg">Dashboard</h1>
</header>
<!-- main content -->
<main class="flex-grow flex min-h-0 border-t">
<!-- section update to tickets -->
<section class="flex flex-col p-4 w-full max-w-sm flex-none bg-gray-100 min-h-0 overflow-auto">
<h1 class="font-semibold mb-3">
Updates to your tickets
</h1>
<ul>
<li>
<article tabindex="0" class="cursor-pointer border rounded-md p-3 bg-white flex text-gray-700 mb-2 hover:border-green-500 focus:outline-none focus:border-green-500">
<span class="flex-none pt-1 pr-2">
<img class="h-8 w-8 rounded-md" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/avatar.png" />
</span>
<div class="flex-1">
<header class="mb-1">
Tarun T <span class="font-semibold">commented</span> on
<h1 class="inline">"RE: WPMS issue".</h1>
</header>
<p class="text-gray-600">
Hi Mazhar, Please note this issue comes when user is not
closing or logout sy…
</p>
<footer class="text-gray-500 mt-2 text-sm">
Friday 22:16
</footer>
</div>
</article>
</li>
<li>
<article tabindex="0" class="cursor-pointer border rounded-md p-3 bg-white flex text-gray-700 mb-2 hover:border-green-500 focus:outline-none focus:border-green-500">
<span class="flex-none pt-1 pr-2">
<img class="h-8 w-8 rounded-md" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/avatar.png" />
</span>
<div class="flex-1">
<header class="mb-1">
Tarun T <span class="font-semibold">commented</span> on
<h1 class="inline">"RE: WPMS issue".</h1>
</header>
<p class="text-gray-600">
Hi Mazhar, Please note this issue comes when user is not
closing or logout sy…
</p>
<footer class="text-gray-500 mt-2 text-sm">
Friday 22:16
</footer>
</div>
</article>
</li>
<li>
<article tabindex="0" class="cursor-pointer border rounded-md p-3 bg-white flex text-gray-700 mb-2 hover:border-green-500 focus:outline-none focus:border-green-500">
<span class="flex-none pt-1 pr-2">
<img class="h-8 w-8 rounded-md" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/avatar.png" />
</span>
<div class="flex-1">
<header class="mb-1">
Tarun T <span class="font-semibold">commented</span> on
<h1 class="inline">"RE: WPMS issue".</h1>
</header>
<p class="text-gray-600">
Hi Mazhar, Please note this issue comes when user is not
closing or logout sy…
</p>
<footer class="text-gray-500 mt-2 text-sm">
Friday 22:16
</footer>
</div>
</article>
</li>
<li>
<article tabindex="0" class="cursor-pointer border rounded-md p-3 bg-white flex text-gray-700 mb-2 hover:border-green-500 focus:outline-none focus:border-green-500">
<span class="flex-none pt-1 pr-2">
<img class="h-8 w-8 rounded-md" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/avatar.png" />
</span>
<div class="flex-1">
<header class="mb-1">
Tarun T <span class="font-semibold">commented</span> on
<h1 class="inline">"RE: WPMS issue".</h1>
</header>
<p class="text-gray-600">
Hi Mazhar, Please note this issue comes when user is not
closing or logout sy…
</p>
<footer class="text-gray-500 mt-2 text-sm">
Friday 22:16
</footer>
</div>
</article>
</li>
<li>
<article tabindex="0" class="cursor-pointer border rounded-md p-3 bg-white flex text-gray-700 mb-2 hover:border-green-500 focus:outline-none focus:border-green-500">
<span class="flex-none pt-1 pr-2">
<img class="h-8 w-8 rounded-md" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/avatar.png" />
</span>
<div class="flex-1">
<header class="mb-1">
Tarun T <span class="font-semibold">commented</span> on
<h1 class="inline">"RE: WPMS issue".</h1>
</header>
<p class="text-gray-600">
Hi Mazhar, Please note this issue comes when user is not
closing or logout sy…
</p>
<footer class="text-gray-500 mt-2 text-sm">
Friday 22:16
</footer>
</div>
</article>
</li>
<li>
<article tabindex="0" class="cursor-pointer border rounded-md p-3 bg-white flex text-gray-700 mb-2 hover:border-green-500 focus:outline-none focus:border-green-500">
<span class="flex-none pt-1 pr-2">
<img class="h-8 w-8 rounded-md" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/avatar.png" />
</span>
<div class="flex-1">
<header class="mb-1">
Tarun T <span class="font-semibold">commented</span> on
<h1 class="inline">"RE: WPMS issue".</h1>
</header>
<p class="text-gray-600">
Hi Mazhar, Please note this issue comes when user is not
closing or logout sy…
</p>
<footer class="text-gray-500 mt-2 text-sm">
Friday 22:16
</footer>
</div>
</article>
</li>
<li>
<article tabindex="0" class="cursor-pointer border rounded-md p-3 bg-white flex text-gray-700 mb-2 hover:border-green-500 focus:outline-none focus:border-green-500">
<span class="flex-none pt-1 pr-2">
<img class="h-8 w-8 rounded-md" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/avatar.png" />
</span>
<div class="flex-1">
<header class="mb-1">
Tarun T <span class="font-semibold">commented</span> on
<h1 class="inline">"RE: WPMS issue".</h1>
</header>
<p class="text-gray-600">
Hi Mazhar, Please note this issue comes when user is not
closing or logout sy…
</p>
<footer class="text-gray-500 mt-2 text-sm">
Friday 22:16
</footer>
</div>
</article>
</li>
<li>
<article tabindex="0" class="cursor-pointer border rounded-md p-3 bg-white flex text-gray-700 mb-2 hover:border-green-500 focus:outline-none focus:border-green-500">
<span class="flex-none pt-1 pr-2">
<img class="h-8 w-8 rounded-md" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/avatar.png" />
</span>
<div class="flex-1">
<header class="mb-1">
Tarun T <span class="font-semibold">commented</span> on
<h1 class="inline">"RE: WPMS issue".</h1>
</header>
<p class="text-gray-600">
Hi Mazhar, Please note this issue comes when user is not
closing or logout sy…
</p>
<footer class="text-gray-500 mt-2 text-sm">
Friday 22:16
</footer>
</div>
</article>
</li>
<li>
<article tabindex="0" class="cursor-pointer border rounded-md p-3 bg-white flex text-gray-700 mb-2 hover:border-green-500 focus:outline-none focus:border-green-500">
<span class="flex-none pt-1 pr-2">
<img class="h-8 w-8 rounded-md" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/avatar.png" />
</span>
<div class="flex-1">
<header class="mb-1">
Tarun T <span class="font-semibold">commented</span> on
<h1 class="inline">"RE: WPMS issue".</h1>
</header>
<p class="text-gray-600">
Hi Mazhar, Please note this issue comes when user is not
closing or logout sy…
</p>
<footer class="text-gray-500 mt-2 text-sm">
Friday 22:16
</footer>
</div>
</article>
</li>
<li>
<article tabindex="0" class="cursor-pointer border rounded-md p-3 bg-white flex text-gray-700 mb-2 hover:border-green-500 focus:outline-none focus:border-green-500">
<span class="flex-none pt-1 pr-2">
<img class="h-8 w-8 rounded-md" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/avatar.png" />
</span>
<div class="flex-1">
<header class="mb-1">
Tarun T <span class="font-semibold">commented</span> on
<h1 class="inline">"RE: WPMS issue".</h1>
</header>
<p class="text-gray-600">
Hi Mazhar, Please note this issue comes when user is not
closing or logout sy…
</p>
<footer class="text-gray-500 mt-2 text-sm">
Friday 22:16
</footer>
</div>
</article>
</li>
<li>
<article tabindex="0" class="cursor-pointer border rounded-md p-3 bg-white flex text-gray-700 mb-2 hover:border-green-500 focus:outline-none focus:border-green-500">
<span class="flex-none pt-1 pr-2">
<img class="h-8 w-8 rounded-md" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/avatar.png" />
</span>
<div class="flex-1">
<header class="mb-1">
Tarun T <span class="font-semibold">commented</span> on
<h1 class="inline">"RE: WPMS issue".</h1>
</header>
<p class="text-gray-600">
Hi Mazhar, Please note this issue comes when user is not
closing or logout sy…
</p>
<footer class="text-gray-500 mt-2 text-sm">
Friday 22:16
</footer>
</div>
</article>
</li>
<li>
<article tabindex="0" class="cursor-pointer border rounded-md p-3 bg-white flex text-gray-700 mb-2 hover:border-green-500 focus:outline-none focus:border-green-500">
<span class="flex-none pt-1 pr-2">
<img class="h-8 w-8 rounded-md" src="https://raw.githubusercontent.com/bluebrown/tailwind-zendesk-clone/master/public/assets/avatar.png" />
</span>
<div class="flex-1">
<header class="mb-1">
Tarun T <span class="font-semibold">commented</span> on
<h1 class="inline">"RE: WPMS issue".</h1>
</header>
<p class="text-gray-600">
Hi Mazhar, Please note this issue comes when user is not
closing or logout sy…
</p>
<footer class="text-gray-500 mt-2 text-sm">
Friday 22:16
</footer>
</div>
</article>
</li>
</ul>
</section>
<!-- section content -->
<section aria-label="main content" class="flex min-h-0 flex-col flex-auto border-l">
<!-- content navigation -->
<nav class="bg-gray-100 flex p-4">
<!-- open tickets nav -->
<section aria-labelledby="open-tickets-tabs-label" class="mr-4 focus:outline-none">
<label id="open-tickets-tabs-label" class="font-semibold block mb-1 text-sm">Open Tickets
<span class="font-normal text-gray-700">(current)</span>
</label>
<ul class="flex">
<li>
<button class="focus:outline-none focus:bg-yellow-200 p-2 rounded-l-md border border-r-0 bg-white flex flex-col items-center w-24">
<p class="font-semibold text-lg">6</p>
<p class="text-sm uppercase text-gray-600">
You
</p>
</button>
</li>
<li>
<button class="focus:outline-none focus:bg-yellow-200 p-2 border rounded-r-md bg-white flex flex-col items-center w-24 cursor-pointer">
<p class="font-semibold text-lg">23</p>
<p class="text-sm uppercase text-gray-600">
Groups
</p>
</button>
</li>
</ul>
</section>
<!-- stats nav -->
<section aria-labelledby="ticket-statistics-tabs-label" class="pb-2">
<label id="ticket-statistics-tabs-label" class="font-semibold block mb-1 text-sm">Ticket Statistics
<span class="font-normal text-gray-700">(this week)</span></label>
<ul class="flex">
<li>
<button class="focus:outline-none focus:bg-yellow-200 p-2 rounded-l-md border border-r-0 bg-white flex flex-col items-center w-24">
<p class="font-semibold text-lg">16</p>
<p class="uppercase text-gray-600 text-sm">
good
</p>
</button>
</li>
<li>
<button class="focus:outline-none focus:bg-yellow-200 p-2 border border-r-0 bg-white flex flex-col items-center w-24">
<p class="font-semibold text-lg">2</p>
<p class="uppercase text-gray-600 text-sm">
bad
</p>
</button>
</li>
<li>
<button class="focus:outline-none focus:bg-yellow-200 p-2 border rounded-r-md bg-white flex flex-col items-center w-24">
<p class="font-semibold text-lg">32</p>
<p class="uppercase text-gray-600 text-sm">
solved
</p>
</button>
</li>
</ul>
</section>
</nav>
<!-- content caption -->
<header class="bg-white border-t flex items-center py-1 px-4">
<div class="flex">
<h2 id="content-caption" class="font-semibold">
Tickets requiring your attention (6)
</h2>
<span class="ml-3 group relative">
<button role="details" aria-controls="info-popup" class="text-blue-700 border-b border-dotted border-blue-700 focus:outline-none text-sm">
What is this?
</button>
<div role="tooltip" id="info-popup" class="absolute pt-1 rounded-md rounded-t-lg right-0 transform translate-x-40 mx-auto hidden group-hover:block z-50">
<div class="border rounded-md rounded-t-lg shadow-lg bg-white w-full max-w-xs w-screen">
<header class="font-semibold rounded-t-lg bg-gray-300 px-4 py-2">
People are waiting for replies!
</header>
<div class="p-4 border-t">
<p class="mb-4">
These are new or open tickets that are assigned to
you, unassinged in your group(s) or not assigned to
any group.
</p>
<p class="mb-1">
They are ordered by priority and requester update date
(oldest first).
</p>
</div>
</div>
</div>
</span>
</div>
<div class="ml-auto">
<button title="See available tickets in this view" aria-label="play" class="border rounded-md px-3 py-2 leading-none">
Play
</button>
</div>
</header>
<!-- content overflow section
remove table and thead but keep tbody and change tbody to section, in order
to have scrollable overflow section -->
<table aria-describedby="info-popup" aria-label="open tickets" class="border-t w-full min-h-0 h-full flex flex-col">
<thead class="flex w-full flex-col px-4">
<tr class="border-b flex">
<th class="font-semibold text-left py-3 pl-3 pr-1 w-24">
<input type="checkbox" name="" id="" />
</th>
<th class="font-semibold text-left py-3 px-1 w-24 truncate">
ID
</th>
<th class="font-semibold text-left py-3 px-1 w-full max-w-xs xl:max-w-lg truncate">
Subject
</th>
<th class="font-semibold text-left py-3 px-1 flex-1 truncate">
Requester
</th>
<th class="font-semibold text-left py-3 px-1 flex-1 truncate">
Requester updated
</th>
<th class="font-semibold text-left py-3 px-1 flex-1 truncate">
Group
</th>
<th class="font-semibold text-left py-3 px-1 flex-1 truncate">
Assignee
</th>
</tr>
</thead>
<tbody class="flex w-full flex-col flex-1 min-h-0 overflow-hidden px-4">
<!-- low -->
<tr class="border-b flex">
<th class="bg-gray-100 text-left px-3 py-2 flex-1" colspan="7">
<h2 class="text-sm">
<span class="font-normal mr-1">Priority</span><span>Low</span>
</h2>
</th>
</tr>
<tr role="row" class="hover:bg-blue-100 border-b flex cursor-pointer">
<td role="cell" headers="select" class="py-3 pl-3 pr-1 w-24 flex items-start">
<input class="mt-1" type="checkbox" />
<div class="ml-auto relative group">
<span style="
padding: 2px 5px;
font-size: 0.7rem;
position: relative;
bottom: 2px;
" class="font-mono rounded-sm bg-red-600 text-white leading-none">O</span>
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-red-600 text-white">Open</span>
<span class="ml-2 text-gray-700">Incident #12534</span>
<span class="ml-1">(Low)</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
Quo laudantium error corporis accusamus unde,
labore quidem non officiis.
</h1>
<p class="mt-3">
Hi Team,
<br />
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Error accusantium molestias fugit commodi
doloremque. <br /><br />
Lorem ipsum dolor sit amet consectetur,
adipisicing elit? ...
</p>
</section>
<footer class="mt-4">
<p class="text-gray-600">Latest Comments</p>
<hr class="mt-1" />
<div class="flex mt-3">
<p class="font-semibold">Nico Braun</p>
<p class="ml-auto text-gray-700 text-sm">
Yesterday 10:33
</p>
</div>
<p class="mt-2">
Dolore odio error inventore sint et dolorum
asperiores exercitationem, quisquam esse.
</p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</td>
<td class="py-3 px-1 w-24">
#12534
</td>
<td class="py-3 px-1 w-full max-w-xs xl:max-w-lg">
<div class="relative group w-full">
<p class="w-full truncate">
Quo laudantium error corporis accusamus unde, labore
quidem non officiis.
</p>
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-red-600 text-white">Open</span>
<span class="ml-2 text-gray-700">Incident #12534</span>
<span class="ml-1">(Low)</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
Quo laudantium error corporis accusamus unde,
labore quidem non officiis.
</h1>
<p class="mt-3">
Hi Team,
<br />
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Error accusantium molestias fugit commodi
doloremque. <br /><br />
Lorem ipsum dolor sit amet consectetur,
adipisicing elit? ...
</p>
</section>
<footer class="mt-4">
<p class="text-gray-600">Latest Comments</p>
<hr class="mt-1" />
<div class="flex mt-3">
<p class="font-semibold">Nico Braun</p>
<p class="ml-auto text-gray-700 text-sm">
Yesterday 10:33
</p>
</div>
<p class="mt-2">
Dolore odio error inventore sint et dolorum
asperiores exercitationem, quisquam esse.
</p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</td>
<td class="py-3 px-1 flex-1 truncate">
Marla Darsuz
</td>
<td class="py-3 px-1 flex-1 truncate">
Tuesday 09:56
</td>
<td class="py-3 px-1 flex-1 truncate">
UK Support
</td>
<td class="py-3 px-1 flex-1 truncate">
Nico Braun
</td>
</tr>
<tr role="row" class="hover:bg-blue-100 border-b flex cursor-pointer">
<td role="cell" headers="select" class="py-3 pl-3 pr-1 w-24 flex items-start">
<input class="mt-1" type="checkbox" />
<div class="ml-auto relative group">
<span style="
padding: 2px 5px;
font-size: 0.7rem;
position: relative;
bottom: 2px;
" class="font-mono rounded-sm bg-red-600 text-white leading-none">O</span>
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-red-600 text-white">Open</span>
<span class="ml-2 text-gray-700">Incident #12534</span>
<span class="ml-1">(Low)</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit.
</h1>
<p class="mt-3">
Hi, <br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Error accusantium molestias fugit commodi
doloremque. <br /><br />
Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Odit consequatur natus aut
reiciendis nisi sed! Temporibus, quibusdam
voluptates? ...
</p>
</section>
<footer class="mt-4">
<p class="text-gray-600">Latest Comments</p>
<hr class="mt-1" />
<div class="flex mt-3">
<p class="font-semibold">Nico Braun</p>
<p class="ml-auto text-gray-700 text-sm">
Today 13:30
</p>
</div>
<p class="mt-2">
Dolore odio error inventore sint et dolorum
asperiores exercitationem, quisquam esse tempora
aliquam voluptates quibusdam quae debitis
laboriosam iure ea quos.
</p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</td>
<td class="py-3 px-1 w-24">
#12534
</td>
<td class="py-3 px-1 w-full max-w-xs xl:max-w-lg">
<div class="relative group w-full">
<p class="w-full truncate">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-red-600 text-white">Open</span>
<span class="ml-2 text-gray-700">Incident #12534</span>
<span class="ml-1">(Low)</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit.
</h1>
<p class="mt-3">
Hi, <br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Error accusantium molestias fugit commodi
doloremque. <br /><br />
Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Odit consequatur natus aut
reiciendis nisi sed! Temporibus, quibusdam
voluptates? ...
</p>
</section>
<footer class="mt-4">
<p class="text-gray-600">Latest Comments</p>
<hr class="mt-1" />
<div class="flex mt-3">
<p class="font-semibold">Nico Braun</p>
<p class="ml-auto text-gray-700 text-sm">
Today 13:30
</p>
</div>
<p class="mt-2">
Dolore odio error inventore sint et dolorum
asperiores exercitationem, quisquam esse tempora
aliquam voluptates quibusdam quae debitis
laboriosam iure ea quos.
</p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</td>
<td class="py-3 px-1 flex-1 truncate">
Jim Beam
</td>
<td class="py-3 px-1 flex-1 truncate">
Friday 10:29
</td>
<td class="py-3 px-1 flex-1 truncate">
UK Support
</td>
<td class="py-3 px-1 flex-1 truncate">
Nico Braun
</td>
</tr>
<tr role="row" class="hover:bg-blue-100 border-b flex cursor-pointer">
<td role="cell" headers="select" class="py-3 pl-3 pr-1 w-24 flex items-start">
<input class="mt-1" type="checkbox" />
<div class="ml-auto relative group">
<span style="
padding: 2px 5px;
font-size: 0.7rem;
position: relative;
bottom: 2px;
" class="font-mono rounded-sm bg-yellow-400 text-black leading-none">N</span>
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-yellow-400 text-black">New</span>
<span class="ml-2 text-gray-700">Incident #12534</span>
<span class="ml-1">(Low)</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
Excepturi at labore vel accusamus exercitationem
quam, amet provident!
</h1>
<p class="mt-3">
Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Odit consequatur natus aut
reiciendis nisi sed! Temporibus, quibusdam
voluptates? ...
</p>
</section>
<footer class="mt-4 hidden">
<p class="text-gray-600">Latest Comments</p>
<hr class="mt-1" />
<div class="flex mt-3">
<p class="font-semibold"></p>
<p class="ml-auto text-gray-700 text-sm"></p>
</div>
<p class="mt-2"></p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</td>
<td class="py-3 px-1 w-24">
#12534
</td>
<td class="py-3 px-1 w-full max-w-xs xl:max-w-lg">
<div class="relative group w-full">
<p class="w-full truncate">
Excepturi at labore vel accusamus exercitationem quam,
amet provident!
</p>
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-yellow-400 text-black">New</span>
<span class="ml-2 text-gray-700">Incident #12534</span>
<span class="ml-1">(Low)</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
Excepturi at labore vel accusamus exercitationem
quam, amet provident!
</h1>
<p class="mt-3">
Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Odit consequatur natus aut
reiciendis nisi sed! Temporibus, quibusdam
voluptates? ...
</p>
</section>
<footer class="mt-4 hidden">
<p class="text-gray-600">Latest Comments</p>
<hr class="mt-1" />
<div class="flex mt-3">
<p class="font-semibold"></p>
<p class="ml-auto text-gray-700 text-sm"></p>
</div>
<p class="mt-2"></p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</td>
<td class="py-3 px-1 flex-1 truncate">
Paul Ferrez
</td>
<td class="py-3 px-1 flex-1 truncate">
Today 13:45
</td>
<td class="py-3 px-1 flex-1 truncate">
-
</td>
<td class="py-3 px-1 flex-1 truncate">
-
</td>
</tr>
<tr role="row" class="hover:bg-blue-100 border-b flex cursor-pointer">
<td role="cell" headers="select" class="py-3 pl-3 pr-1 w-24 flex items-start">
<input class="mt-1" type="checkbox" />
<div class="ml-auto relative group">
<span style="
padding: 2px 5px;
font-size: 0.7rem;
position: relative;
bottom: 2px;
" class="font-mono rounded-sm bg-red-600 text-white leading-none">O</span>
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-red-600 text-white">Open</span>
<span class="ml-2 text-gray-700">Incident #12534</span>
<span class="ml-1">(Low)</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
impedit possimus praesentium voluptatum omnis
assumenda rem autem magni consequatur nostrum
distinctio unde.
</h1>
<p class="mt-3">
Hi Team,
<br />
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Error accusantium molestias fugit commodi
doloremque. <br /><br />
Lorem ipsum dolor sit amet consectetur,
adipisicing elit? ...
</p>
</section>
<footer class="mt-4">
<p class="text-gray-600">Latest Comments</p>
<hr class="mt-1" />
<div class="flex mt-3">
<p class="font-semibold">Nico Braun</p>
<p class="ml-auto text-gray-700 text-sm">
Yesterday 10:33
</p>
</div>
<p class="mt-2">
Dolore odio error inventore sint et dolorum
asperiores exercitationem, quisquam esse.
</p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</td>
<td class="py-3 px-1 w-24">
#12534
</td>
<td class="py-3 px-1 w-full max-w-xs xl:max-w-lg">
<div class="relative group w-full">
<p class="w-full truncate">
impedit possimus praesentium voluptatum omnis assumenda
rem autem magni consequatur nostrum distinctio unde.
</p>
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-red-600 text-white">Open</span>
<span class="ml-2 text-gray-700">Incident #12534</span>
<span class="ml-1">(Low)</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
impedit possimus praesentium voluptatum omnis
assumenda rem autem magni consequatur nostrum
distinctio unde.
</h1>
<p class="mt-3">
Hi Team,
<br />
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Error accusantium molestias fugit commodi
doloremque. <br /><br />
Lorem ipsum dolor sit amet consectetur,
adipisicing elit? ...
</p>
</section>
<footer class="mt-4">
<p class="text-gray-600">Latest Comments</p>
<hr class="mt-1" />
<div class="flex mt-3">
<p class="font-semibold">Nico Braun</p>
<p class="ml-auto text-gray-700 text-sm">
Yesterday 10:33
</p>
</div>
<p class="mt-2">
Dolore odio error inventore sint et dolorum
asperiores exercitationem, quisquam esse.
</p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</td>
<td class="py-3 px-1 flex-1 truncate">
Sara Dechicco
</td>
<td class="py-3 px-1 flex-1 truncate">
Thursday 09:22
</td>
<td class="py-3 px-1 flex-1 truncate">
UK Support
</td>
<td class="py-3 px-1 flex-1 truncate">
Nico Braun
</td>
</tr>
<!-- medium -->
<tr class="border-b flex">
<th class="bg-gray-100 text-left px-3 py-2 flex-1" colspan="7">
<h2 class="text-sm">
<span class="font-normal mr-1">Priority</span>
<span>Medium</span>
</h2>
</th>
</tr>
<tr role="row" class="hover:bg-blue-100 border-b flex cursor-pointer">
<td role="cell" headers="select" class="py-3 pl-3 pr-1 w-24 flex items-start">
<input class="mt-1" type="checkbox" />
<div class="ml-auto relative group">
<span style="
padding: 2px 5px;
font-size: 0.7rem;
position: relative;
bottom: 2px;
" class="font-mono rounded-sm bg-yellow-400 text-black leading-none">N</span>
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-yellow-400 text-black">New</span>
<span class="ml-2 text-gray-700">Incident #12534</span>
<span class="ml-1">(Medium)</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
Excepturi at labore vel accusamus exercitationem
assumenda ex incidunt eum quam, amet provident!
</h1>
<p class="mt-3">
Hi, <br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Error accusantium molestias fugit commodi
doloremque. <br /><br />
Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Odit consequatur natus aut
reiciendis nisi sed! Temporibus, quibusdam
voluptates? ...
</p>
</section>
<footer class="mt-4 hidden">
<p class="text-gray-600">Latest Comments</p>
<hr class="mt-1" />
<div class="flex mt-3">
<p class="font-semibold"></p>
<p class="ml-auto text-gray-700 text-sm"></p>
</div>
<p class="mt-2"></p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</td>
<td class="py-3 px-1 w-24">
#12534
</td>
<td class="py-3 px-1 w-full max-w-xs xl:max-w-lg">
<div class="relative group w-full">
<p class="w-full truncate">
Excepturi at labore vel accusamus exercitationem
assumenda ex incidunt eum quam, amet provident!
</p>
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-yellow-400 text-black">New</span>
<span class="ml-2 text-gray-700">Incident #12534</span>
<span class="ml-1">(Medium)</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
Excepturi at labore vel accusamus exercitationem
assumenda ex incidunt eum quam, amet provident!
</h1>
<p class="mt-3">
Hi, <br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Error accusantium molestias fugit commodi
doloremque. <br /><br />
Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Odit consequatur natus aut
reiciendis nisi sed! Temporibus, quibusdam
voluptates? ...
</p>
</section>
<footer class="mt-4 hidden">
<p class="text-gray-600"></p>
<hr class="mt-1" />
<div class="flex mt-3">
<p class="font-semibold"></p>
<p class="ml-auto text-gray-700 text-sm"></p>
</div>
<p class="mt-2">
Dolore odio error inventore sint et dolorum
asperiores exercitationem, quisquam esse tempora
aliquam voluptates quibusdam quae debitis
laboriosam iure ea quos.
</p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</td>
<td class="py-3 px-1 flex-1 truncate">
Freddy Murro
</td>
<td class="py-3 px-1 flex-1 truncate">
Today 12:13
</td>
<td class="py-3 px-1 flex-1 truncate">
-
</td>
<td class="py-3 px-1 flex-1 truncate">
-
</td>
</tr>
<tr role="row" class="hover:bg-blue-100 border-b flex cursor-pointer">
<td role="cell" headers="select" class="py-3 pl-3 pr-1 w-24 flex items-start">
<input class="mt-1" type="checkbox" />
<div class="ml-auto relative group">
<span style="
padding: 2px 5px;
font-size: 0.7rem;
position: relative;
bottom: 2px;
" class="font-mono rounded-sm bg-red-600 text-white leading-none">O</span>
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-red-600 text-white">Open</span>
<span class="ml-2 text-gray-700">Incident #12534</span>
<span class="ml-1">(Medium)</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
Odit consequatur natus aut reiciendis nisi sed!
</h1>
<p class="mt-3">
Hi, <br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Error accusantium molestias fugit commodi
doloremque. <br /><br />
Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Temporibus, quibusdam
voluptates? ...
</p>
</section>
<footer class="mt-4">
<p class="text-gray-600">Latest Comments</p>
<hr class="mt-1" />
<div class="flex mt-3">
<p aria-label="commenter" class="font-semibold">
Nico Braun
</p>
<p aria-label="time" class="ml-auto text-gray-700 text-sm">
Today 06:34
</p>
</div>
<p aria-label="comment" class="mt-2">
Quos explicabo sed nisi totam dolores deleniti
blanditiis culpa dolor provident perferendis
sapiente corrupti repudiandae ea dolore.
</p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</td>
<td class="py-3 px-1 w-24">
#12534
</td>
<td class="py-3 px-1 w-full max-w-xs xl:max-w-lg">
<div class="relative group w-full">
<p class="w-full truncate">
Odit consequatur natus aut reiciendis nisi sed!
</p>
<!-- dropdown -->
<span class="hidden group-hover:block ml-4 mt-10 w-screen max-w-lg absolute top-0 border shadow-lg p-6 bg-white rounded-md z-50 text-gray-900">
<article>
<header>
<div>
<span class="px-3 py-1 uppercase text-xs leading-none rounded-sm bg-red-600 text-white">Open</span>
<span class="ml-2 text-gray-700">Incident #12534</span>
<span class="ml-1">(Medium)</span>
</div>
</header>
<section class="mt-5">
<h1 class="text-sm font-semibold mt-3">
Odit consequatur natus aut reiciendis nisi sed!
</h1>
<p class="mt-3">
Hi, <br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Error accusantium molestias fugit commodi
doloremque. <br /><br />
Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Temporibus, quibusdam
voluptates? ...
</p>
</section>
<footer class="mt-4">
<p class="text-gray-600">Latest Comments</p>
<hr class="mt-1" />
<div class="flex mt-3">
<p aria-label="commenter" class="font-semibold">
Nico Braun
</p>
<p aria-label="time" class="ml-auto text-gray-700 text-sm">
Today 06:34
</p>
</div>
<p aria-label="comment" class="mt-2">
Quos explicabo sed nisi totam dolores deleniti
blanditiis culpa dolor provident perferendis
sapiente corrupti repudiandae ea dolore.
</p>
</footer>
</article>
</span>
<!-- end dropdown -->
</div>
</td>
<td class="py-3 px-1 flex-1 truncate">
Carla Sandaers
</td>
<td class="py-3 px-1 flex-1 truncate">
Today 08:13
</td>
<td class="py-3 px-1 flex-1 truncate">
-
</td>
<td class="py-3 px-1 flex-1 truncate">
-
</td>
</tr>
<!-- high -->
<tr class="border-b flex hidden">
<th class="bg-gray-100 text-left px-3 py-2 flex-1" colspan="7">
<h2 class="text-sm">
<span class="font-normal mr-1">Priority</span>
<span>High</span>
</h2>
</th>
</tr>
</tbody>
</table>
<!-- content footer, currently hidden -->
<footer aria-label="content footer" class="flex p-3 bg-white border-t hidden">
footer
</footer>
</section>
</main>
</div>
</div>
</body>
</html>
How to create a Zen Desk Clone with Tailwind CSS?
Install tailwind css of verion 1.3.4
Use the link html tag to import the stylesheet of Tailwind CSS of the version 1.3.4
<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">
All the unility class needed to create a Zen Desk Clone component
h-fullw-fullflexoverflow-hiddentext-gray-800bg-whiteflex-noneflex-coltext-centerbg-teal-900text-gray-400border-rh-16h-6w-6mx-autopx-6text-whitebg-teal-700h-5w-5hover:text-whitemt-autoh-8w-10flex-1relativepx-4text-smw-3h-3ml-2absolutep-1hiddengroup-hover:blockpy-2w-screenmax-w-mdw-dropdown-largemb-2blockpy-3py-1my-1focus:bg-blue-100hover:bg-blue-100pr-2bg-red-600text-gray-600mx-1bg-yellow-400text-blackbg-gray-500bg-blue-600bg-gray-800px-8pr-8pl-4focus:border-blackw-4focus:w-64top-0right-0pr-3h-4w-8ml-3bg-gray-600h-10bg-gray-100border-ttext-lgflex-growmin-h-0p-4max-w-smoverflow-automb-3p-3text-gray-700hover:border-green-500focus:border-green-500pt-1mb-1inlinetext-gray-500mt-2flex-autoborder-lmr-4focus:bg-yellow-200p-2border-r-0w-24pb-2text-blue-700border-bborder-dottedborder-blue-700z-50max-w-xsbg-gray-300mb-4ml-autopx-3text-leftpl-3pr-1px-1xl:max-w-lgmr-1mt-1ml-4mt-10max-w-lgp-6text-gray-900text-xsml-1mt-5mt-3mt-4
123 steps to create a Zen Desk Clone component with Tailwind CSS
Use
h-fullto set an element’s height to 100% of its parent, as long as the parent has a defined height.Use
w-fullto set an element to a 100% based width.Use
flexto create a block-level flex container.Use
overflow-hiddento clip any content within an element that overflows the bounds of that element.Control the text color of an element to gray-800 using the
text-gray-800utilities.Control the background color of an element to white using the
bg-whiteutilities.Use
flexto create a block-level flex container.Use
flexto create a block-level flex container.Control the text color of an element to center using the
text-centerutilities.Control the background color of an element to teal-900 using the
bg-teal-900utilities.Control the text color of an element to gray-400 using the
text-gray-400utilities.Control the border color of an element to r using the
border-rutilities.Use
h-16to set an element to a fixed height(4rem).Use
h-6to set an element to a fixed height(1.5rem).Use
w-6to set an element to a fixed width(1.5rem).Control the horizontal margin of an element to auto using the
mx-autoutilities.Control the horizontal padding of an element to 1.5rem using the
px-6utilities.Control the text color of an element to white using the
text-whiteutilities.Control the background color of an element to teal-700 using the
bg-teal-700utilities.Use
h-5to set an element to a fixed height(1.25rem).Use
w-5to set an element to a fixed width(1.25rem).Control the text color of an element to white on hover using the
hover:text-whiteutilities.Control the margin on top side of an element to auto using the
mt-autoutilities.Use
h-8to set an element to a fixed height(2rem).Use
w-10to set an element to a fixed width(2.5rem).Use
flexto create a block-level flex container.Use
relativeto position an element according to the normal flow of the document.Control the horizontal padding of an element to 1rem using the
px-4utilities.Control the text color of an element to sm using the
text-smutilities.Use
w-3to set an element to a fixed width(0.75rem).Use
h-3to set an element to a fixed height(0.75rem).Control the margin on left side of an element to 0.5rem using the
ml-2utilities.Use
absoluteto position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.Control the padding on all sides of an element to 0.25rem using the
p-1utilities.Use
hiddento set an element to display: none and remove it from the page layout.Use
inlineutilities to put the element on its own line and fill its parent.Control the vertical padding of an element to 0.5rem using the
py-2utilities.Use
w-screento make an element span the entire width of the viewport.Set the maximum width/height of an element using the
max-w-mdutilities.Use
w-dropdown-largeto set an element to a fixed width(dropdown-large).Control the margin on bottom side of an element to 0.5rem using the
mb-2utilities.Use
inlineutilities to put the element on its own line and fill its parent.Control the vertical padding of an element to 0.75rem using the
py-3utilities.Control the vertical padding of an element to 0.25rem using the
py-1utilities.Control the vertical margin of an element to 0.25rem using the
my-1utilities.Control the background color of an element to blue-100 using the
focus:bg-blue-100utilities on focus.Control the background color of an element to blue-100 using the
hover:bg-blue-100utilities on hover.Control the padding on right side of an element to 0.5rem using the
pr-2utilities.Control the background color of an element to red-600 using the
bg-red-600utilities.Control the text color of an element to gray-600 using the
text-gray-600utilities.Control the horizontal margin of an element to 0.25rem using the
mx-1utilities.Control the background color of an element to yellow-400 using the
bg-yellow-400utilities.Control the text color of an element to black using the
text-blackutilities.Control the background color of an element to gray-500 using the
bg-gray-500utilities.Control the background color of an element to blue-600 using the
bg-blue-600utilities.Control the background color of an element to gray-800 using the
bg-gray-800utilities.Control the horizontal padding of an element to 2rem using the
px-8utilities.Control the padding on right side of an element to 2rem using the
pr-8utilities.Adjust the left padding of an element to 1rem using the
pl-4utilities classControl the border color of an element to black using the
focus:border-blackutilities on focus.Use
w-4to set an element to a fixed width(1rem).Use
focus:w-64to set an element to a fixed width(16rem) on focus.Use the
top-0utilities to set the top position of a positioned element to 0rem.Use the
right-0utilities to set the right position of a positioned element to 0rem.Control the padding on right side of an element to 0.75rem using the
pr-3utilities.Use
h-4to set an element to a fixed height(1rem).Use
w-8to set an element to a fixed width(2rem).Control the margin on left side of an element to 0.75rem using the
ml-3utilities.Control the background color of an element to gray-600 using the
bg-gray-600utilities.Use
h-10to set an element to a fixed height(2.5rem).Control the background color of an element to gray-100 using the
bg-gray-100utilities.Control the border color of an element to t using the
border-tutilities.Control the text color of an element to lg using the
text-lgutilities.Use
flexto create a block-level flex container.Set the minimum width/height of an element using the
min-h-0utilities.Control the padding on all sides of an element to 1rem using the
p-4utilities.Set the maximum width/height of an element using the
max-w-smutilities.Use
overflow-autoto add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike.overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.Control the margin on bottom side of an element to 0.75rem using the
mb-3utilities.Control the padding on all sides of an element to 0.75rem using the
p-3utilities.Control the text color of an element to gray-700 using the
text-gray-700utilities.Control the border color of an element to green-500 using the
hover:border-green-500utilities on hover.Control the border color of an element to green-500 using the
focus:border-green-500utilities on focus.Control the padding on top side of an element to 0.25rem using the
pt-1utilities.Control the margin on bottom side of an element to 0.25rem using the
mb-1utilities.Use
inlineutilities to control the flow of text inside the element to wrap normally.Control the text color of an element to gray-500 using the
text-gray-500utilities.Control the margin on top side of an element to 0.5rem using the
mt-2utilities.Use
flexto create a block-level flex container.Control the border color of an element to l using the
border-lutilities.Control the margin on right side of an element to 1rem using the
mr-4utilities.Control the background color of an element to yellow-200 using the
focus:bg-yellow-200utilities on focus.Control the padding on all sides of an element to 0.5rem using the
p-2utilities.Control the border color of an element to r-0 using the
border-r-0utilities.Use
w-24to set an element to a fixed width(6rem).Control the padding on bottom side of an element to 0.5rem using the
pb-2utilities.Control the text color of an element to blue-700 using the
text-blue-700utilities.Control the border color of an element to b using the
border-butilities.Control the border color of an element to dotted using the
border-dottedutilities.Control the border color of an element to blue-700 using the
border-blue-700utilities.Control the stack order (or three-dimensional positioning) of an element to 50 in Tailwind, regardless of order it has been displayed, using the
z-50utilities.Set the maximum width/height of an element using the
max-w-xsutilities.Control the background color of an element to gray-300 using the
bg-gray-300utilities.Control the margin on bottom side of an element to 1rem using the
mb-4utilities.Control the margin on left side of an element to auto using the
ml-autoutilities.Control the horizontal padding of an element to 0.75rem using the
px-3utilities.Control the text color of an element to left using the
text-leftutilities.Adjust the left padding of an element to 0.75rem using the
pl-3utilities classControl the padding on right side of an element to 0.25rem using the
pr-1utilities.Control the horizontal padding of an element to 0.25rem using the
px-1utilities.Set the maximum width/height of an element using the
xl:max-w-lgutilities at only extremely large screen sizes.Control the margin on right side of an element to 0.25rem using the
mr-1utilities.Control the margin on top side of an element to 0.25rem using the
mt-1utilities.Control the margin on left side of an element to 1rem using the
ml-4utilities.Control the margin on top side of an element to 2.5rem using the
mt-10utilities.Set the maximum width/height of an element using the
max-w-lgutilities.Control the padding on all sides of an element to 1.5rem using the
p-6utilities.Control the text color of an element to gray-900 using the
text-gray-900utilities.Control the text color of an element to xs using the
text-xsutilities.Control the margin on left side of an element to 0.25rem using the
ml-1utilities.Control the margin on top side of an element to 1.25rem using the
mt-5utilities.Control the margin on top side of an element to 0.75rem using the
mt-3utilities.Control the margin on top side of an element to 1rem using the
mt-4utilities.
Conclusion
The above is a step-by-step tutorial on how to use Tailwind CSS to create a Zen Desk Clone components, learn and follow along to implement your own components.