No notes defined.
<div class="space-y-2xlSpace">
<header>
<nav class="bg-white border-slate-200 border-b">
<div class="mx-auto px-mdSpace sm:px-6 lg:px-lgSpace">
<div class="flex h-20 justify-between">
<div class="flex">
<div class="flex flex-shrink-0 items-center">
<img class="block h-8 w-auto lg:hidden" src="../../assets/kanopi.svg" alt="Your Company">
<img class="hidden h-8 w-auto lg:block" src="../../assets/kanopi.svg" alt="Your Company">
</div>
<div class="hidden lg:flex">
<div class="rounded-md lg:ml-6 flex flex-row items-center">
<ul class="flex flex-row items-center">
<li>
<a href="#" class="bg-tertiary-100 rounded-md text-tertiary-700 hover:text-tertiary-500 hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Tickets
</a>
</li>
<li class="relative">
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Projects
</a>
</li>
<li class="relative">
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Clients
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Timesheets
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Reports
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Invoices
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="hidden lg:ml-6 lg:flex lg:items-center">
<div class="hidden lg:ml-6 lg:flex lg:space-x-xsSpace">
<div class="rounded border border-tertiary-200 flex px-xsSpace py-xsSpace text-white items-center hover:bg-tertiary-200 cursor-pointer">
<span class="fill-current text-tertiary-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </span>
</div>
</div>
<!-- Profile dropdown -->
<div class="relative ml-3">
<div>
<button type="button" class="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<span class="font-semibold text-tertiary-700 bg-tertiary-200 px-smSpace py-xsSpace rounded-md leading-none text-sm flex items-center space-x-xsSpace">
<span>Account Name</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
</svg>
</span>
</button>
</div>
<div class="absolute mt-xsSpace right-0">
<div class="bg-white z-10 shadow-lg rounded overflow-hidden ring-1 ring-black ring-opacity-5 origin-top-right focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<ul class="text-sm font-medium text-tertiary-500 [&>a]:whitespace-nowrap">
<li>
<a href="#" class="bg-tertiary-100 block px-smSpace py-xsSpace text-tertiary-700 font-semibold">Your Profile</a>
</li>
<li>
<a href="#" class="block px-smSpace py-xsSpace hover:bg-tertiary-100 hover:text-tertiary-800">Settings</a>
</li>
<li>
<a href="#" class="block px-smSpace py-xsSpace hover:bg-tertiary-100 hover:text-tertiary-800">Sign Out</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="flex items-center lg:hidden">
<button type="button" class="border border-tertiary-200 inline-flex items-center justify-center rounded-md p-xsSpace text-tertiary-600 hover:bg-tertiary-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg class="hidden h-6 w-6" 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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div id="mobile-menu" class="lg:hidden">
<div class="flex flex-col my-mdSpace">
<a href="#" class="bg-tertiary-200 rounded-md hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Clients
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Projects
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Tickets
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Timesheets
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Reports
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Users
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Comments
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Invoices
</a>
</div>
</div>
</div>
</nav>
</header>
<h2>Timer</h2>
<header>
<nav class="bg-white border-slate-200 border-b">
<div class="mx-auto px-mdSpace sm:px-6 lg:px-lgSpace">
<div class="flex h-20 justify-between">
<div class="flex">
<div class="flex flex-shrink-0 items-center">
<img class="block h-8 w-auto lg:hidden" src="../../assets/kanopi.svg" alt="Your Company">
<img class="hidden h-8 w-auto lg:block" src="../../assets/kanopi.svg" alt="Your Company">
</div>
<div class="hidden lg:flex">
<div class="rounded-md lg:ml-6 flex flex-row items-center">
<ul class="flex flex-row items-center">
<li>
<a href="#" class="bg-tertiary-100 rounded-md text-tertiary-700 hover:text-tertiary-500 hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Tickets
</a>
</li>
<li class="relative">
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Projects
</a>
</li>
<li class="relative">
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Clients
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Timesheets
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Reports
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Invoices
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="hidden lg:ml-6 lg:flex lg:items-center">
<div class="hidden lg:ml-6 lg:flex lg:space-x-xsSpace">
<div class="rounded border border-tertiary-200 flex px-xsSpace py-xsSpace text-white items-center hover:bg-tertiary-200 cursor-pointer">
<span class="fill-current text-tertiary-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </span>
</div>
</div>
<!-- Profile dropdown -->
<div class="relative ml-3">
<div>
<button type="button" class="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<span class="font-semibold whitespace-nowrap text-tertiary-700 flex items-center space-x-smSpace px-smSpace py-xsSpace rounded-md leading-none text-sm">
<span>Account Name</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
</svg>
</span>
</button>
</div>
<div class="absolute mt-xsSpace right-0">
</div>
</div>
</div>
<div class="flex items-center lg:hidden">
<button type="button" class="border border-tertiary-200 inline-flex items-center justify-center rounded-md p-xsSpace text-tertiary-600 hover:bg-tertiary-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg class="hidden h-6 w-6" 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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div id="mobile-menu" class="lg:hidden">
<div class="flex flex-col my-mdSpace">
<a href="#" class="bg-tertiary-200 rounded-md hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Clients
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Projects
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Tickets
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Timesheets
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Reports
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Users
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Comments
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Invoices
</a>
</div>
</div>
</div>
</nav>
</header>
<header>
<nav class="bg-white border-slate-200 border-b">
<div class="mx-auto px-mdSpace sm:px-6 lg:px-lgSpace">
<div class="flex h-20 justify-between">
<div class="flex">
<div class="flex flex-shrink-0 items-center">
<img class="block h-8 w-auto lg:hidden" src="../../assets/kanopi.svg" alt="Your Company">
<img class="hidden h-8 w-auto lg:block" src="../../assets/kanopi.svg" alt="Your Company">
</div>
<div class="hidden lg:flex">
<div class="rounded-md lg:ml-6 flex flex-row items-center">
<ul class="flex flex-row items-center">
<li>
<a href="#" class="bg-tertiary-100 rounded-md text-tertiary-700 hover:text-tertiary-500 hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Tickets
</a>
</li>
<li class="relative">
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Projects
</a>
</li>
<li class="relative">
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Clients
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Timesheets
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Reports
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Invoices
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="hidden lg:ml-6 lg:flex lg:items-center">
<div class="hidden lg:ml-6 lg:flex lg:space-x-xsSpace">
<div class="relative">
<div class="rounded border bg-tertiary-200 border-tertiary-200 flex px-xsSpace py-xsSpace text-white items-center hover:bg-tertiary-200 cursor-pointer">
<span class="fill-current text-tertiary-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </span>
</div>
<span class="absolute mt-xsSpace right-0">
<div class="bg-white z-10 shadow-lg rounded overflow-hidden ring-1 ring-black ring-opacity-5 origin-top-right focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<ul class="text-sm font-medium text-tertiary-500 [&>a]:whitespace-nowrap">
<a href="#" class="bg-tertiary-100 block px-smSpace py-xsSpace text-tertiary-700 font-semibold">Love U Soap Ad hoc</a>
<a href="#" class="block px-smSpace py-xsSpace hover:bg-tertiary-100 hover:text-tertiary-800">Mandole Orchard Updates</a>
<a href="#" class="block px-smSpace py-xsSpace hover:bg-tertiary-100 hover:text-tertiary-800">SOS UX Design</a>
</ul>
</div>
</span>
</div>
</div>
<!-- Profile dropdown -->
<div class="relative ml-3">
<div>
<button type="button" class="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<span class="font-semibold whitespace-nowrap text-tertiary-700 flex items-center space-x-smSpace px-smSpace py-xsSpace rounded-md leading-none text-sm">
<span>Account Name</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
</svg>
</span>
</button>
</div>
<div class="absolute mt-xsSpace right-0">
</div>
</div>
</div>
<div class="flex items-center lg:hidden">
<button type="button" class="border border-tertiary-200 inline-flex items-center justify-center rounded-md p-xsSpace text-tertiary-600 hover:bg-tertiary-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg class="hidden h-6 w-6" 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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div id="mobile-menu" class="lg:hidden">
<div class="flex flex-col my-mdSpace">
<a href="#" class="bg-tertiary-200 rounded-md hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Clients
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Projects
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Tickets
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Timesheets
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Reports
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Users
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Comments
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Invoices
</a>
</div>
</div>
</div>
</nav>
</header>
<header>
<nav class="bg-white border-slate-200 border-b">
<div class="mx-auto px-mdSpace sm:px-6 lg:px-lgSpace">
<div class="flex h-20 justify-between">
<div class="flex">
<div class="flex flex-shrink-0 items-center">
<img class="block h-8 w-auto lg:hidden" src="../../assets/kanopi.svg" alt="Your Company">
<img class="hidden h-8 w-auto lg:block" src="../../assets/kanopi.svg" alt="Your Company">
</div>
<div class="hidden lg:flex">
<div class="rounded-md lg:ml-6 flex flex-row items-center">
<ul class="flex flex-row items-center">
<li>
<a href="#" class="bg-tertiary-100 rounded-md text-tertiary-700 hover:text-tertiary-500 hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Tickets
</a>
</li>
<li class="relative">
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Projects
</a>
</li>
<li class="relative">
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Clients
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Timesheets
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Reports
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Invoices
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="hidden lg:ml-6 lg:flex lg:items-center">
<div class="hidden lg:ml-6 lg:flex lg:space-x-xsSpace">
<div class="flex items-center space-x-smSpace">
<div class="flex items-center space-x-mdSpace">
<span class="text-sm font-semibold">Task name</span>
<div class="relative">
<div class="border-2 border-success-500 flex rounded p-0 justify-between items-stretch cursor-pointer relative z-10 bg-white overflow-hidden">
<div class="flex items-center px-smSpace py-xsSpace">
<span class="text-tertiary-700 inline-flex items-center text-xs font-semibold text-primary">
1:30
</span>
</div>
<div class="group">
<div class="bg-success-500 px-xsSpace flex h-full items-center group-hover:hidden group-hover:bg-tertiary-500">
<span class="[&>svg]:w-4 [&>svg]:h-4 fill-current text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path d="M5.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h1.5a.75.75 0 00.75-.75V3.75A.75.75 0 007.25 3h-1.5zM12.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h1.5a.75.75 0 00.75-.75V3.75a.75.75 0 00-.75-.75h-1.5z" />
</svg> </span>
</div>
</div>
</div>
<span class="absolute overflow-hidden -left-0.5 -top-0.5 -right-0.5 -bottom-0.5 rounded-md">
<span class="timer-pulse absolute w-full h-full bg-success-500 scale-105"></span>
</span>
</div>
</div>
</div>
</div>
<!-- Profile dropdown -->
<div class="relative ml-3">
<div>
<button type="button" class="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<span class="font-semibold whitespace-nowrap text-tertiary-700 flex items-center space-x-smSpace px-smSpace py-xsSpace rounded-md leading-none text-sm">
<span>Account Name</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
</svg>
</span>
</button>
</div>
<div class="absolute mt-xsSpace right-0">
</div>
</div>
</div>
<div class="flex items-center lg:hidden">
<button type="button" class="border border-tertiary-200 inline-flex items-center justify-center rounded-md p-xsSpace text-tertiary-600 hover:bg-tertiary-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg class="hidden h-6 w-6" 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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div id="mobile-menu" class="lg:hidden">
<div class="flex flex-col my-mdSpace">
<a href="#" class="bg-tertiary-200 rounded-md hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Clients
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Projects
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Tickets
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Timesheets
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Reports
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Users
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Comments
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Invoices
</a>
</div>
</div>
</div>
</nav>
</header>
<header>
<nav class="bg-white border-slate-200 border-b">
<div class="mx-auto px-mdSpace sm:px-6 lg:px-lgSpace">
<div class="flex h-20 justify-between">
<div class="flex">
<div class="flex flex-shrink-0 items-center">
<img class="block h-8 w-auto lg:hidden" src="../../assets/kanopi.svg" alt="Your Company">
<img class="hidden h-8 w-auto lg:block" src="../../assets/kanopi.svg" alt="Your Company">
</div>
<div class="hidden lg:flex">
<div class="rounded-md lg:ml-6 flex flex-row items-center">
<ul class="flex flex-row items-center">
<li>
<a href="#" class="bg-tertiary-100 rounded-md text-tertiary-700 hover:text-tertiary-500 hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Tickets
</a>
</li>
<li class="relative">
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Projects
</a>
</li>
<li class="relative">
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Clients
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Timesheets
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Reports
</a>
</li>
<li>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Invoices
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="hidden lg:ml-6 lg:flex lg:items-center">
<div class="hidden lg:ml-6 lg:flex lg:space-x-xsSpace">
<div class="rounded border border-tertiary-200 flex px-xsSpace py-xsSpace text-white items-center hover:bg-tertiary-200 cursor-pointer">
<span class="fill-current text-tertiary-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </span>
</div>
<div class="flex items-center space-x-mdSpace">
<span class="text-sm font-semibold">Task name</span>
<div class="border-tertiary-200 flex justify-between rounded border relative overflow-hidden items-stretch cursor-pointer">
<div class="flex items-center px-smSpace py-xsSpace">
<span class="font-semibold inline-flex items-center border-transparent text-xs text-primary">
1:30
</span>
</div>
<div class="bg-tertiary-200 px-xsSpace flex items-center">
<span class="[&>svg]:w-4 [&>svg]:h-4 fill-current text-tertiary-700">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
</svg>
</span>
</div>
</div>
</div>
</div>
<!-- Profile dropdown -->
<div class="relative ml-3">
<div>
<button type="button" class="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<span class="font-semibold whitespace-nowrap text-tertiary-700 flex items-center space-x-smSpace px-smSpace py-xsSpace rounded-md leading-none text-sm">
<span>Account Name</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
</svg>
</span>
</button>
</div>
<div class="absolute mt-xsSpace right-0">
</div>
</div>
</div>
<div class="flex items-center lg:hidden">
<button type="button" class="border border-tertiary-200 inline-flex items-center justify-center rounded-md p-xsSpace text-tertiary-600 hover:bg-tertiary-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg class="hidden h-6 w-6" 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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div id="mobile-menu" class="lg:hidden">
<div class="flex flex-col my-mdSpace">
<a href="#" class="bg-tertiary-200 rounded-md hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Clients
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Projects
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Tickets
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Timesheets
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Reports
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Users
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Comments
</a>
<a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
Invoices
</a>
</div>
</div>
</div>
</nav>
</header>
</div>
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJUMg9qwWNHgaiuoDoEgHkn%2Ffractal.dcodegroup.com%3Fnode-id%3D3477%253A13223%26t%3D7PFoNpgoOhnxO9FX-1