TailDesk
A premium and clean dashboard UI for your support service
<!--
TailDesk - A premium and clean dashboard UI for your support service
Created by John Champ
Founder of Pixelcave -> https://pixelcave.com
Building CodedVisuals -> https://codedvisuals.com
Building CodedVisuals -> https://codedvisuals.com
Building Tailkit -> https://tailkit.com
Let's connect on X -> https://x.com/pixelcave_john
on Bluesky -> https://bsky.app/profile/pixelcave-john.bsky.social
-->
<div x-data="{ userDropdownOpen: false, notificationsDropdownOpen: false, mobileNavOpen: false }">
<!-- Page Container -->
<div id="page-container" class="mx-auto flex min-h-screen w-full min-w-[320px] flex-col bg-white lg:pt-20">
<!-- Page Header -->
<header id="page-header"
class="z-50 flex flex-none items-center border-b border-neutral-200/75 bg-white/90 backdrop-blur-xs lg:fixed lg:inset-s-0 lg:inset-e-0 lg:top-0 lg:h-20">
<div class="container mx-auto px-4 lg:px-8 xl:max-w-7xl">
<div class="flex justify-between py-5 lg:py-0">
<!-- Left Section -->
<div class="flex items-center gap-2 lg:gap-6">
<!-- Logo -->
<a href="javascript:void(0)"
class="group inline-flex items-center gap-1.5 text-lg font-bold tracking-wide text-neutral-900 hover:text-neutral-600">
<svg
class="hi-mini hi-lifebuoy inline-block size-5 text-neutral-950 transition group-hover:scale-110 group-active:scale-100"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.171 4.146l1.947 2.466a3.514 3.514 0 011.764 0l1.947-2.466a6.52 6.52 0 00-5.658 0zm8.683 3.025l-2.466 1.947c.15.578.15 1.186 0 1.764l2.466 1.947a6.52 6.52 0 000-5.658zm-3.025 8.683l-1.947-2.466c-.578.15-1.186.15-1.764 0l-1.947 2.466a6.52 6.52 0 005.658 0zM4.146 12.83l2.466-1.947a3.514 3.514 0 010-1.764L4.146 7.171a6.52 6.52 0 000 5.658zM5.63 3.297a8.01 8.01 0 018.738 0 8.031 8.031 0 012.334 2.334 8.01 8.01 0 010 8.738 8.033 8.033 0 01-2.334 2.334 8.01 8.01 0 01-8.738 0 8.032 8.032 0 01-2.334-2.334 8.01 8.01 0 010-8.738A8.03 8.03 0 015.63 3.297zm5.198 4.882a2.008 2.008 0 00-2.243.407 1.994 1.994 0 00-.407 2.243 1.993 1.993 0 00.992.992 2.008 2.008 0 002.243-.407c.176-.175.31-.374.407-.585a2.008 2.008 0 00-.407-2.243 1.993 1.993 0 00-.585-.407z"
clip-rule="evenodd" />
</svg>
<span>Tail<span class="font-normal">Desk</span></span>
</a>
<!-- END Logo -->
<!-- Desktop Navigation -->
<nav class="hidden items-center gap-2 lg:flex">
<a href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg bg-neutral-100 px-3 py-1.5 text-sm font-medium text-neutral-950">
<span>Dashboard</span>
</a>
<a href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-800 hover:bg-neutral-100 hover:text-neutral-950 active:bg-neutral-50">
<span>Tickets</span>
</a>
<a href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-800 hover:bg-neutral-100 hover:text-neutral-950 active:bg-neutral-50">
<span>Reports</span>
</a>
<a href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-800 hover:bg-neutral-100 hover:text-neutral-950 active:bg-neutral-50">
<span>Customers</span>
</a>
</nav>
<!-- END Desktop Navigation -->
</div>
<!-- END Left Section -->
<!-- Right Section -->
<div class="flex items-center gap-2">
<!-- Notifications -->
<div class="relative inline-block">
<!-- Dropdown Toggle Button -->
<button x-on:click="notificationsDropdownOpen = !notificationsDropdownOpen"
x-bind:aria-expanded="notificationsDropdownOpen" type="button" id="dropdown-notifications"
class="inline-flex items-center justify-center gap-1 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200"
aria-haspopup="true">
<div class="absolute -inset-e-2 -top-2">
<span class="rounded-full bg-neutral-800 px-1.5 py-0.5 text-xs font-semibold text-white">3</span>
</div>
<svg class="hi-outline hi-bell-alert inline-block size-5" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
</svg>
</button>
<!-- END Dropdown Toggle Button -->
<!-- Dropdown -->
<div x-cloak x-show="notificationsDropdownOpen" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0" x-on:click.outside="notificationsDropdownOpen = false" role="menu"
aria-labelledby="dropdown-notifications"
class="absolute -inset-e-20 z-10 mt-2 w-64 rounded-lg shadow-xl lg:w-80 ltr:origin-top-right rtl:origin-top-left">
<div class="rounded-lg bg-white py-2.5 ring-1 ring-black/5">
<a role="menuitem" href="javascript:void(0)"
class="group block gap-1.5 px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 hover:text-neutral-950">
<div class="text-xs text-neutral-600">Just now</div>
<h5 class="mb-0.5 font-semibold">
<span class="text-indigo-500">•</span>
New Ticket Assigned: #4567
</h5>
<p class="text-xs text-neutral-500">
You have been assigned a new ticket regarding a
software installation issue. Please review and respond
promptly.
</p>
</a>
<a role="menuitem" href="javascript:void(0)"
class="group block gap-1.5 px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 hover:text-neutral-950">
<div class="text-xs text-neutral-600">2 hours ago</div>
<h5 class="mb-0.5 font-semibold">
<span class="text-indigo-500">•</span>
Feedback Requested for Ticket #4432
</h5>
<p class="text-xs text-neutral-500">
Your recently resolved ticket regarding account
recovery has been flagged for quality review. Please
provide your feedback.
</p>
</a>
<a role="menuitem" href="javascript:void(0)"
class="group block gap-1.5 px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 hover:text-neutral-950">
<div class="text-xs text-neutral-600">5 hours ago</div>
<h5 class="mb-0.5 font-semibold">
<span class="text-indigo-500">•</span>
Monthly Performance Metrics Available
</h5>
<p class="text-xs text-neutral-500">
Your support performance metrics for the past month
are now available. Review them for insights on
response times and customer satisfaction.
</p>
</a>
<hr class="my-2.5 border-neutral-100" />
<div class="px-4 py-1.5">
<a href="javascript:void(0)"
class="inline-flex w-full items-center justify-center gap-1 rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200">
<svg class="hi-mini hi-bell-alert inline-block size-4 opacity-50"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path
d="M4.214 3.227a.75.75 0 00-1.156-.956 8.97 8.97 0 00-1.856 3.826.75.75 0 001.466.316 7.47 7.47 0 011.546-3.186zM16.942 2.271a.75.75 0 00-1.157.956 7.47 7.47 0 011.547 3.186.75.75 0 001.466-.316 8.971 8.971 0 00-1.856-3.826z" />
<path fill-rule="evenodd"
d="M10 2a6 6 0 00-6 6c0 1.887-.454 3.665-1.257 5.234a.75.75 0 00.515 1.076 32.94 32.94 0 003.256.508 3.5 3.5 0 006.972 0 32.933 32.933 0 003.256-.508.75.75 0 00.515-1.076A11.448 11.448 0 0116 8a6 6 0 00-6-6zm0 14.5a2 2 0 01-1.95-1.557 33.54 33.54 0 003.9 0A2 2 0 0110 16.5z"
clip-rule="evenodd" />
</svg>
<span>All notifications</span>
</a>
</div>
</div>
</div>
<!-- END Dropdown -->
</div>
<!-- END Notifications -->
<!-- User Dropdown -->
<div class="relative inline-block">
<!-- Dropdown Toggle Button -->
<button x-on:click="userDropdownOpen = !userDropdownOpen" x-bind:aria-expanded="userDropdownOpen"
type="button" id="dropdown-user"
class="inline-flex items-center justify-center gap-1 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200"
aria-haspopup="true">
<svg class="hi-mini hi-user-circle inline-block size-5 sm:hidden" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-5.5-2.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10 12a5.99 5.99 0 00-4.793 2.39A6.483 6.483 0 0010 16.5a6.483 6.483 0 004.793-2.11A5.99 5.99 0 0010 12z"
clip-rule="evenodd" />
</svg>
<span class="hidden sm:inline">John</span>
<svg class="hi-mini hi-chevron-down hidden size-5 opacity-40 sm:inline-block"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd" />
</svg>
</button>
<!-- END Dropdown Toggle Button -->
<!-- Dropdown -->
<div x-cloak x-show="userDropdownOpen" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0" x-on:click.outside="userDropdownOpen = false" role="menu"
aria-labelledby="dropdown-user"
class="absolute inset-e-0 z-10 mt-2 w-40 rounded-lg shadow-xl ltr:origin-top-right rtl:origin-top-left">
<div class="rounded-lg bg-white py-2.5 ring-1 ring-black/5">
<a role="menuitem" href="javascript:void(0)"
class="group flex items-center justify-between gap-1.5 px-4 py-1.5 text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-950">
<span class="grow">Account</span>
<span class="rounded-full border border-neutral-200 px-2 py-1 text-xs font-semibold">3</span>
</a>
<a role="menuitem" href="javascript:void(0)"
class="group flex items-center justify-between gap-1.5 px-4 py-1.5 text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-950">
<span class="grow">Settings</span>
<span class="rounded-full border border-neutral-200 px-2 py-1 text-xs font-semibold">2</span>
</a>
<hr class="my-2.5 border-neutral-100" />
<form onsubmit="return false;">
<button type="submit" role="menuitem"
class="group flex w-full items-center justify-between gap-1.5 px-4 py-1.5 text-start text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-950">
<span class="grow">Sign out</span>
</button>
</form>
</div>
</div>
<!-- END Dropdown -->
</div>
<!-- END User Dropdown -->
<!-- Toggle Mobile Navigation -->
<div class="lg:hidden">
<button x-on:click="mobileNavOpen = !mobileNavOpen" type="button"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200">
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-menu inline-block size-5">
<path fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
<!-- END Toggle Mobile Navigation -->
</div>
<!-- END Right Section -->
</div>
<!-- Mobile Navigation -->
<div x-cloak x-show="mobileNavOpen" class="lg:hidden">
<nav class="flex flex-col gap-2 border-t border-neutral-200 py-4">
<a href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg bg-neutral-100 px-3 py-1.5 text-sm font-medium text-neutral-950">
<span>Dashboard</span>
</a>
<a href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-800 hover:bg-neutral-100 hover:text-neutral-950 active:bg-neutral-50">
<span>Tickets</span>
</a>
<a href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-800 hover:bg-neutral-100 hover:text-neutral-950 active:bg-neutral-50">
<span>Reports</span>
</a>
<a href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-800 hover:bg-neutral-100 hover:text-neutral-950 active:bg-neutral-50">
<span>Customers</span>
</a>
</nav>
</div>
<!-- END Mobile Navigation -->
</div>
</header>
<!-- END Page Header -->
<!-- Page Content -->
<main id="page-content" class="flex max-w-full flex-auto flex-col">
<!-- Page Heading -->
<div class="container mx-auto px-4 pt-6 lg:px-8 lg:pt-8 xl:max-w-7xl">
<div class="flex flex-col gap-2 text-center sm:flex-row sm:items-center sm:justify-between sm:text-start">
<div class="grow">
<h1 class="mb-1 text-xl font-bold">Dashboard</h1>
<h2 class="text-sm font-medium text-neutral-500">
Welcome, you have <strong>5 open tickets</strong> and
<strong>3 notifications</strong>.
</h2>
</div>
<div class="flex flex-none items-center justify-center gap-2 rounded-sm sm:justify-end">
<div class="relative">
<div
class="pointer-events-none absolute inset-y-0 inset-s-0 my-px ms-px flex w-10 items-center justify-center rounded-l-lg text-neutral-500">
<svg class="hi-mini hi-magnifying-glass inline-block size-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd" />
</svg>
</div>
<input type="text" id="search" name="search" placeholder="Search everything.."
class="block w-full rounded-lg border border-neutral-200 py-2 ps-10 pe-3 leading-6 placeholder-neutral-500 focus:border-neutral-500 focus:ring-3 focus:ring-neutral-500/25" />
</div>
</div>
</div>
</div>
<!-- END Page Heading -->
<!-- Page Section -->
<div class="container mx-auto p-4 lg:p-8 xl:max-w-7xl">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:gap-8">
<!-- Quick Statistics -->
<a href="javascript:void(0)"
class="flex flex-col rounded-lg border border-neutral-200 bg-white hover:border-neutral-300 active:border-neutral-200">
<div class="flex grow items-center justify-between p-5">
<dl>
<dt class="text-2xl font-bold">5</dt>
<dd class="text-sm font-medium text-neutral-500">
Open Tickets
</dd>
</dl>
<div class="flex items-center text-sm font-medium text-emerald-500">
<svg class="hi-mini hi-arrow-down inline-block size-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
clip-rule="evenodd" />
</svg>
<span>5%</span>
</div>
</div>
<div class="border-t border-neutral-100 px-5 py-3 text-xs font-medium text-orange-500">
Assigned to you
</div>
</a>
<a href="javascript:void(0)"
class="flex flex-col rounded-lg border border-neutral-200 bg-white hover:border-neutral-300 active:border-neutral-200">
<div class="flex grow items-center justify-between p-5">
<dl>
<dt class="text-2xl font-bold">28</dt>
<dd class="text-sm font-medium text-neutral-500">
Open Tickets
</dd>
</dl>
<div class="flex items-center text-sm font-medium text-emerald-500">
<svg class="hi-mini hi-arrow-down inline-block size-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
clip-rule="evenodd" />
</svg>
<span>12%</span>
</div>
</div>
<div class="border-t border-neutral-100 px-5 py-3 text-xs font-medium text-neutral-500">
In total
</div>
</a>
<a href="javascript:void(0)"
class="flex flex-col rounded-lg border border-neutral-200 bg-white hover:border-neutral-300 active:border-neutral-200">
<div class="flex grow items-center justify-between p-5">
<dl>
<dt class="text-2xl font-bold">792</dt>
<dd class="text-sm font-medium text-neutral-500">
Closed Tickets
</dd>
</dl>
<div class="flex items-center text-sm font-medium text-rose-500">
<svg class="hi-mini hi-arrow-down inline-block size-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
clip-rule="evenodd" />
</svg>
<span>7,5%</span>
</div>
</div>
<div class="border-t border-neutral-100 px-5 py-3 text-xs font-medium text-neutral-500">
Last 30 days
</div>
</a>
<a href="javascript:void(0)"
class="flex flex-col rounded-lg border border-neutral-200 bg-white hover:border-neutral-300 active:border-neutral-200">
<div class="flex grow items-center justify-between p-5">
<dl>
<dt class="text-2xl font-bold">2,580</dt>
<dd class="text-sm font-medium text-neutral-500">
All Customers
</dd>
</dl>
<div class="flex items-center text-sm font-medium text-emerald-500">
<svg class="hi-mini hi-arrow-small-up inline-block size-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 15a.75.75 0 01-.75-.75V7.612L7.29 9.77a.75.75 0 01-1.08-1.04l3.25-3.5a.75.75 0 011.08 0l3.25 3.5a.75.75 0 11-1.08 1.04l-1.96-2.158v6.638A.75.75 0 0110 15z"
clip-rule="evenodd" />
</svg>
<span>25%</span>
</div>
</div>
<div class="border-t border-neutral-100 px-5 py-3 text-xs font-medium text-neutral-500">
Last 30 days
</div>
</a>
<!-- END Quick Statistics -->
<!-- Tickets -->
<div class="flex flex-col rounded-lg border border-neutral-200 bg-white sm:col-span-2 lg:col-span-4">
<div
class="flex flex-col items-center justify-between gap-4 border-b border-neutral-100 p-5 text-center sm:flex-row sm:text-start">
<div>
<h2 class="mb-0.5 font-semibold">Recent tickets</h2>
<h3 class="text-sm font-medium text-neutral-600">
It seems that we are receiving less tickets the last 30
days
</h3>
</div>
<div>
<a href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200">
View all tickets
</a>
</div>
</div>
<div class="p-5">
<!-- Responsive Table Container -->
<div class="min-w-full overflow-x-auto rounded-sm">
<!-- Alternate Responsive Table -->
<table class="min-w-full align-middle text-sm">
<!-- Table Header -->
<thead>
<tr class="border-b-2 border-neutral-100">
<th
class="min-w-[140px] px-3 py-2 text-start text-sm font-semibold tracking-wider text-neutral-700 uppercase">
ID
</th>
<th
class="min-w-[180px] px-3 py-2 text-start text-sm font-semibold tracking-wider text-neutral-700 uppercase">
Date
</th>
<th
class="min-w-[180px] px-3 py-2 text-start text-sm font-semibold tracking-wider text-neutral-700 uppercase">
User
</th>
<th
class="min-w-[180px] px-3 py-2 text-start text-sm font-semibold tracking-wider text-neutral-700 uppercase">
Title
</th>
<th class="px-3 py-2 text-start text-sm font-semibold tracking-wider text-neutral-700 uppercase">
Status
</th>
<th
class="min-w-[100px] p-3 py-2 text-end text-sm font-semibold tracking-wider text-neutral-700 uppercase">
</th>
</tr>
</thead>
<!-- END Table Header -->
<!-- Table Body -->
<tbody>
<tr class="border-b border-neutral-100 hover:bg-neutral-50">
<td class="p-3 text-start font-semibold text-neutral-600">
RN#4585
</td>
<td class="p-3 text-start text-neutral-600">
2023-11-15 09:30
</td>
<td class="p-3 font-medium text-neutral-600">
<a href="javascript:void(0)"
class="underline decoration-neutral-200 decoration-2 underline-offset-4 hover:text-neutral-950 hover:decoration-neutral-300">Alex
Johnson</a>
</td>
<td class="p-3 text-start">
Unable to Connect to Wi-Fi on Laptop
</td>
<td class="p-3 font-medium">
<div
class="inline-block rounded-full bg-purple-100 px-2 py-1 text-xs leading-4 font-semibold whitespace-nowrap text-purple-800">
New
</div>
</td>
<td class="p-3 text-end font-medium">
<a href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200">
<span>View</span>
<svg
class="hi-mini hi-arrow-right inline-block size-5 text-neutral-400 group-hover:text-blue-600 group-active:translate-x-0.5"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"></path>
</svg>
</a>
</td>
</tr>
<tr class="border-b border-neutral-100 hover:bg-neutral-50">
<td class="p-3 text-start font-semibold text-neutral-600">
RN#4584
</td>
<td class="p-3 text-start text-neutral-600">
2023-11-10 14:15
</td>
<td class="p-3 font-medium text-neutral-600">
<a href="javascript:void(0)"
class="underline decoration-neutral-200 decoration-2 underline-offset-4 hover:text-neutral-950 hover:decoration-neutral-300">Jordan
Smith</a>
</td>
<td class="p-3 text-start">
Email Campaign Software Crashing Frequently
</td>
<td class="p-3 font-medium">
<div
class="inline-block rounded-full bg-blue-100 px-2 py-1 text-xs leading-4 font-semibold whitespace-nowrap text-blue-800">
Awaiting Response
</div>
</td>
<td class="p-3 text-end font-medium">
<a href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200">
<span>View</span>
<svg
class="hi-mini hi-arrow-right inline-block size-5 text-neutral-400 group-hover:text-blue-600 group-active:translate-x-0.5"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"></path>
</svg>
</a>
</td>
</tr>
<tr class="border-b border-neutral-100 hover:bg-neutral-50">
<td class="p-3 text-start font-semibold text-neutral-600">
RN#4583
</td>
<td class="p-3 text-start text-neutral-600">
2023-11-05 17:45
</td>
<td class="p-3 font-medium text-neutral-600">
<a href="javascript:void(0)"
class="underline decoration-neutral-200 decoration-2 underline-offset-4 hover:text-neutral-950 hover:decoration-neutral-300">Samantha
Davis</a>
</td>
<td class="p-3 text-start">
Issues Syncing Calendar Across Devices
</td>
<td class="p-3 font-medium">
<div
class="inline-block rounded-full bg-blue-100 px-2 py-1 text-xs leading-4 font-semibold whitespace-nowrap text-blue-800">
Awaiting Response
</div>
</td>
<td class="p-3 text-end font-medium">
<a href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200">
<span>View</span>
<svg
class="hi-mini hi-arrow-right inline-block size-5 text-neutral-400 group-hover:text-blue-600 group-active:translate-x-0.5"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"></path>
</svg>
</a>
</td>
</tr>
<tr class="border-b border-neutral-100 hover:bg-neutral-50">
<td class="p-3 text-start font-semibold text-neutral-600">
RN#4582
</td>
<td class="p-3 text-start text-neutral-600">
2023-10-30 08:00
</td>
<td class="p-3 font-medium text-neutral-600">
<a href="javascript:void(0)"
class="underline decoration-neutral-200 decoration-2 underline-offset-4 hover:text-neutral-950 hover:decoration-neutral-300">Mindy
O'Connell</a>
</td>
<td class="p-3 text-start">
Graphics Tablet Not Responding in Design Software
</td>
<td class="p-3 font-medium">
<div
class="inline-block rounded-full bg-purple-100 px-2 py-1 text-xs leading-4 font-semibold whitespace-nowrap text-purple-800">
New
</div>
</td>
<td class="p-3 text-end font-medium">
<a href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200">
<span>View</span>
<svg
class="hi-mini hi-arrow-right inline-block size-5 text-neutral-400 group-hover:text-blue-600 group-active:translate-x-0.5"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"></path>
</svg>
</a>
</td>
</tr>
<tr class="border-b border-neutral-100 hover:bg-neutral-50">
<td class="p-3 text-start font-semibold text-neutral-600">
RN#4581
</td>
<td class="p-3 text-start text-neutral-600">
2023-10-25 20:20
</td>
<td class="p-3 font-medium text-neutral-600">
<a href="javascript:void(0)"
class="underline decoration-neutral-200 decoration-2 underline-offset-4 hover:text-neutral-950 hover:decoration-neutral-300">Dave
Rodriguez</a>
</td>
<td class="p-3 text-start">
Server Timeout Errors During Development
</td>
<td class="p-3 font-medium">
<div
class="inline-block rounded-full bg-orange-100 px-2 py-1 text-xs leading-4 font-semibold whitespace-nowrap text-orange-800">
Under Investigation
</div>
</td>
<td class="p-3 text-end font-medium">
<a href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200">
<span>View</span>
<svg
class="hi-mini hi-arrow-right inline-block size-5 text-neutral-400 group-hover:text-blue-600 group-active:translate-x-0.5"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"></path>
</svg>
</a>
</td>
</tr>
<tr class="border-b border-neutral-100 hover:bg-neutral-50">
<td class="p-3 text-start font-semibold text-neutral-600">
RN#4580
</td>
<td class="p-3 text-start text-neutral-600">
2023-11-10 14:15
</td>
<td class="p-3 font-medium text-neutral-600">
<a href="javascript:void(0)"
class="underline decoration-neutral-200 decoration-2 underline-offset-4 hover:text-neutral-950 hover:decoration-neutral-300">Helen
Thompson</a>
</td>
<td class="p-3 text-start">
Payroll System Access Denied Error
</td>
<td class="p-3 font-medium">
<div
class="inline-block rounded-full bg-orange-100 px-2 py-1 text-xs leading-4 font-semibold whitespace-nowrap text-orange-800">
Under Investigation
</div>
</td>
<td class="p-3 text-end font-medium">
<a href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200">
<span>View</span>
<svg
class="hi-mini hi-arrow-right inline-block size-5 text-neutral-400 group-hover:text-blue-600 group-active:translate-x-0.5"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"></path>
</svg>
</a>
</td>
</tr>
<tr class="border-b border-neutral-100 hover:bg-neutral-50">
<td class="p-3 text-start font-semibold text-neutral-600">
RN#4579
</td>
<td class="p-3 text-start text-neutral-600">
2023-10-15 09:15
</td>
<td class="p-3 font-medium text-neutral-600">
<a href="javascript:void(0)"
class="underline decoration-neutral-200 decoration-2 underline-offset-4 hover:text-neutral-950 hover:decoration-neutral-300">Peter
Williams</a>
</td>
<td class="p-3 text-start">
CRM Tool Lagging and Freezing
</td>
<td class="p-3 font-medium">
<div
class="inline-block rounded-full bg-emerald-100 px-2 py-1 text-xs leading-4 font-semibold whitespace-nowrap text-emerald-800">
Closed
</div>
</td>
<td class="p-3 text-end font-medium">
<a href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200">
<span>View</span>
<svg
class="hi-mini hi-arrow-right inline-block size-5 text-neutral-400 group-hover:text-blue-600 group-active:translate-x-0.5"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"></path>
</svg>
</a>
</td>
</tr>
<tr class="border-b border-neutral-100 hover:bg-neutral-50">
<td class="p-3 text-start font-semibold text-neutral-600">
RN#4578
</td>
<td class="p-3 text-start text-neutral-600">
2023-10-10 16:30
</td>
<td class="p-3 font-medium text-neutral-600">
<a href="javascript:void(0)"
class="underline decoration-neutral-200 decoration-2 underline-offset-4 hover:text-neutral-950 hover:decoration-neutral-300">Fiona
Martinez</a>
</td>
<td class="p-3 text-start">
VPN Disconnections When Working Remotely
</td>
<td class="p-3 font-medium">
<div
class="inline-block rounded-full bg-emerald-100 px-2 py-1 text-xs leading-4 font-semibold whitespace-nowrap text-emerald-800">
Closed
</div>
</td>
<td class="p-3 text-end font-medium">
<a href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200">
<span>View</span>
<svg
class="hi-mini hi-arrow-right inline-block size-5 text-neutral-400 group-hover:text-blue-600 group-active:translate-x-0.5"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"></path>
</svg>
</a>
</td>
</tr>
<tr class="border-b border-neutral-100 hover:bg-neutral-50">
<td class="p-3 text-start font-semibold text-neutral-600">
RN#4577
</td>
<td class="p-3 text-start text-neutral-600">
2023-10-05 14:00
</td>
<td class="p-3 font-medium text-neutral-600">
<a href="javascript:void(0)"
class="underline decoration-neutral-200 decoration-2 underline-offset-4 hover:text-neutral-950 hover:decoration-neutral-300">Danny
Kim</a>
</td>
<td class="p-3 text-start">
Database Query Execution Taking Too Long
</td>
<td class="p-3 font-medium">
<div
class="inline-block rounded-full bg-emerald-100 px-2 py-1 text-xs leading-4 font-semibold whitespace-nowrap text-emerald-800">
Closed
</div>
</td>
<td class="p-3 text-end font-medium">
<a href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200">
<span>View</span>
<svg
class="hi-mini hi-arrow-right inline-block size-5 text-neutral-400 group-hover:text-blue-600 group-active:translate-x-0.5"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"></path>
</svg>
</a>
</td>
</tr>
<tr class="border-b border-neutral-100 hover:bg-neutral-50">
<td class="p-3 text-start font-semibold text-neutral-600">
RN#4576
</td>
<td class="p-3 text-start text-neutral-600">
2023-10-01 11:45
</td>
<td class="p-3 font-medium text-neutral-600">
<a href="javascript:void(0)"
class="underline decoration-neutral-200 decoration-2 underline-offset-4 hover:text-neutral-950 hover:decoration-neutral-300">Mike
Brown</a>
</td>
<td class="p-3 text-start">
Video Conferencing Tool Audio Issues
</td>
<td class="p-3 font-medium">
<div
class="inline-block rounded-full bg-emerald-100 px-2 py-1 text-xs leading-4 font-semibold whitespace-nowrap text-emerald-800">
Closed
</div>
</td>
<td class="p-3 text-end font-medium">
<a href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-neutral-800 hover:border-neutral-300 hover:text-neutral-950 active:border-neutral-200">
<span>View</span>
<svg
class="hi-mini hi-arrow-right inline-block size-5 text-neutral-400 group-hover:text-blue-600 group-active:translate-x-0.5"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"></path>
</svg>
</a>
</td>
</tr>
</tbody>
<!-- END Table Body -->
</table>
<!-- END Alternate Responsive Table -->
</div>
<!-- END Responsive Table Container -->
</div>
</div>
<!-- END Tickets -->
</div>
</div>
<!-- END Page Section -->
</main>
<!-- END Page Content -->
<!-- Page Footer -->
<footer id="page-footer" class="flex flex-none items-center py-5">
<div
class="container mx-auto flex flex-col px-4 text-center text-sm md:flex-row md:justify-between md:text-start lg:px-8 xl:max-w-7xl">
<div class="pt-4 pb-1 md:pb-4">
©
<span class="font-medium">TailDesk</span>
</div>
<div class="inline-flex items-center justify-center pt-1 pb-4 md:pt-4">
<span>Crafted with</span>
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-heart mx-1 inline-block size-4 text-red-600">
<path fill-rule="evenodd"
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
clip-rule="evenodd"></path>
</svg>
<span>
by
<a href="https://pixelcave.com" class="font-medium text-blue-600 hover:text-blue-400"
target="_blank">pixelcave</a></span>
</div>
</div>
</footer>
<!-- END Page Footer -->
</div>
<!-- END Page Container -->
</div>
Unlock an exclusive dashboard and get early access to all the new ones!
Join our pixelcave newsletter today, and we’ll send you a custom UI Design Kit which includes an exclusive dashboard template and many other free Tailwind CSS templates, just for you! Also, you will be the first to get any upcoming dashboards.