Home
Lior Medan
Admin Panel

Admin Panel

Source https://gist.github.com/visualval/8aaaad794256313fa2310b997e8a9b8f

This tailwind example is contributed by Lior Medan, on 18-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Admin Dashboard, User dashboard

Dashboard

Author Lior Medan

1.9k

Fork Fullscreen

<!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>

<ul aria-label="top bar left" aria-orientation="horizontal" class="flex">
                    
                    <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">&#183;</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">&#183;</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">&#183;</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">&#183;</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">&#183;</span>
                    <span>Nico Braun</span>
                </p>
            </div>
        </div>
    </li>
    </ul>
    </span>
    </li>
    </ul>

<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>

<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 class="flex-grow flex min-h-0 border-t">
        
        <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 aria-label="main content" class="flex min-h-0 flex-col flex-auto border-l">
            
            <nav class="bg-gray-100 flex p-4">
                
                <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>
                
                <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>

<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>

<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">
                    
                    <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>
                                
                                <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>
                            
                            </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>
                                
                                <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>
                            
                            </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>
                                
                                <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>
                            
                            </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>
                                
                                <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>
                            
                            </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>
                                
                                <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>
                            
                            </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>
                                
                                <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>
                            
                            </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>
                                
                                <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>
                            
                            </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>
                                
                                <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>
                            
                            </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>
                    
                    <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>
                                
                                <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>

Related Examples

Tailwind Dashboard
full responsive

Author:
Tanvir Hasan Bappy (Tanvir)

2 weeks ago

251
Responsive Dashboard
1. Background Colors: 1. Main background: `bg-indigo-50` 2. Welcome card: `bg-indigo-100` with `border-indigo-200` 3. Inbox card: `bg-blue-100` with `border-blue-200` 4. Overlay: `bg-indigo-900/50` 2. Text Colors: 1. Header text: `text-indigo-800` 2. Logo: `text-blue-900` and `text-indigo-800` 3. Menu items hover: `hover:text-indigo-800` 4. Card headings: `text-blue-900` 3. Button/Badge Colors: 1. Welcome badge: `bg-indigo-800` 2. Inbox button: `bg-blue-800` with `hover:bg-blue-900` 3. Stats card titles: `text-indigo-800` 4. Maintained all functionality: 1. Responsive design 2. Animations and transitions 3. Mobile menu 4. Hover effects 5. Notification animation The color scheme now uses a mix of Indigo-800 and Blue-900 while maintaining visual hierarchy and accessibility. The colors create a professional and cohesive look across all components.

Author:
nejaa badr

5 months ago

2.7k
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

2 months ago

433
quora/reddit
reddit / quora have some kind of same template. looksalikes. brothas

Author:
Anonymous

1 year ago

10.9k
quora/reddit
reddit / quora have some kind of same template. looksalikes. brothas

Author:
Katherine Glenn

3 months ago

931
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

2 months ago

493
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

5 months ago

2.2k
User dashboard

Author:
Anonymous

1 year ago

11.3k
Admin Panel
Source https://gist.github.com/visualval/8aaaad794256313fa2310b997e8a9b8f

Author:
Mr Robot

2 years ago

21.8k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

6 months ago

2.4k
dashboard layout

Author:
AKASH GANDHAR

4 weeks ago

179
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Author:
Алла Телегина

1 month ago

329

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components