Home
Mr Robot
Admin Panel

Admin Panel

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

This tailwind example is contributed by Mr Robot, on 24-Aug-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Admin Dashboard, User dashboard

Dashboard

Author Mr Robot

24.7k

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