No notes defined.
<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>
<div class="container">
<main class="flex-1">
<div class="space-y-lgSpace">
<div class="mx-auto max-w-7xl px-mdSpace sm:px-lgSpace md:px-xlSpace">
</div>
<div class="mx-auto max-w-7xl px-mdSpace sm:px-lgSpace md:px-xlSpace">
<div class="space-y-xlSpace">
<!-- Alert > Success -->
<div class="alert alert--success" role="alert">
<div class="alert__wrapper">
<div class="alert__left">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="alert__icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="alert__center">
<p class="alert__heading alert__heading--success">Successfully added new user!</p>
<div class="alert__body alert__body--success">
</div>
</div>
<div class="alert__right">
<div class="alert__button_wrapper">
<button type="button" class="alert__button alert__button--success">
<span class="alert__dismiss">Dismiss</span>
<!-- Heroicon name: mini/x-mark -->
<svg class="alert__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="sm:flex sm:items-center">
<div class="sm:flex-auto">
<h1>
Heading
</h1>
<p class="mt-smSpace">A list of all the users in your account including their name, title, email and
role.</p>
</div>
<div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<!-- Chevron left -->
<button class="btn-primary btn-icon flex-row-reverse space-x-reverse " type="button">
<span>Add Item</span>
<div class="btn-icon-left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
</svg>
</div>
</button>
</div>
</div>
<div class="space-y-lgSpace">
<div class="flex flex-col items-end max-sm:space-y-smSpace sm:flex-row justify-end sm:items-center sm:space-x-mdSpace">
<div class="flex space-x-xsSpace">
<label class="block">
<input type="text" class="text-sm border border-tertiary-200 px-xsSpace py-2xsSpace block w-full rounded-md " />
</label>
<!-- Button element for forms -->
<button class="btn-secondary btn-sm" type="button">Search</button>
</div>
<div class="flex space-x-xsSpace">
<div class="relative">
<!-- Chevron left -->
<button class="btn-secondary btn-icon flex-row-reverse space-x-reverse btn-sm" type="button">
<span>Filter</span>
<div class="btn-icon-left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path d="M10 3.75a2 2 0 10-4 0 2 2 0 004 0zM17.25 4.5a.75.75 0 000-1.5h-5.5a.75.75 0 000 1.5h5.5zM5 3.75a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5a.75.75 0 01.75.75zM4.25 17a.75.75 0 000-1.5h-1.5a.75.75 0 000 1.5h1.5zM17.25 17a.75.75 0 000-1.5h-5.5a.75.75 0 000 1.5h5.5zM9 10a.75.75 0 01-.75.75h-5.5a.75.75 0 010-1.5h5.5A.75.75 0 019 10zM17.25 10.75a.75.75 0 000-1.5h-1.5a.75.75 0 000 1.5h1.5zM14 10a2 2 0 10-4 0 2 2 0 004 0zM10 16.25a2 2 0 10-4 0 2 2 0 004 0z" />
</svg>
</div>
</button>
<div class="absolute right-0 top-xlSpace z-20">
</div>
</div>
<!-- Button element for forms -->
<button class="btn-secondary btn-sm" type="button">Export</button>
<!-- Chevron left -->
<button class="btn-primary btn-icon flex-row-reverse space-x-reverse btn-sm" type="button">
<span>Add Item</span>
<div class="btn-icon-left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
</svg>
</div>
</button>
</div>
</div>
<div class="space-y-2xlSpace">
<div class="space-y-mdSpace">
<span class="inline-block text-xs text-tertiary-500">Showing 1 to 50 of 100</span>
<div class="-mx-4 overflow-hidden sm:-mx-6 md:mx-0 md:rounded-lg">
<table class="min-w-full">
<thead class="bg-tertiary-100">
<tr>
<th scope="col" class="py-smSpace pl-mdSpace pr-3 text-left text-sm font-medium text-tertiary-700 sm:pl-lgSpace"></th>
<th scope="col" class="py-smSpace pl-mdSpace pr-3 text-left text-sm font-medium text-tertiary-700 sm:pl-lgSpace max-lg:hidden">Name</th>
<th scope="col" class="px-3 py-smSpace text-left text-sm font-medium text-tertiary-700 table-cell">Title</th>
<th scope="col" class="hidden px-3 py-smSpace text-left text-sm font-medium text-tertiary-700 lg:table-cell max-lg:hidden">Email</th>
<th scope="col" class="hidden px-3 py-smSpace text-left text-sm font-medium text-tertiary-700 sm:table-cell max-lg:hidden">Role</th>
<th scope="col" class="px-3 py-smSpace text-left text-sm font-medium text-tertiary-700 table-cell">Status</th>
<th scope="col" class="relative py-smSpace pl-3 pr-mdSpace sm:pr-lgSpace">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-tertiary-200 bg-white">
<tr class="align-top lg:align-middle">
<td class="whitespace-nowrap py-4 pl-mdSpace pr-3 text-sm font-medium text-tertiary-900 sm:pl-lgSpace">
<label class="flex items-center">
<label class="flex items-center space-x-xsSpace">
<input type="checkbox" class="wrapper__checkbox">
<span class="text-tertiary-700 text-xs"></span>
</label>
</label>
</td>
<td class="w-full max-w-0 py-4 pl-mdSpace pr-3 text-sm font-medium text-tertiary-900 sm:w-auto sm:max-w-none sm:pl-lgSpace">
<div class="flex items-start lg:items-center space-x-smSpace">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div>
<span>Lindsay Walton</span>
<dl class="font-normal lg:hidden">
<dt class="sr-only">Title</dt>
<dd class="mt-1 truncate text-tertiary-700">Front-end Developer</dd>
<dt class="sr-only lg:hidden">Email</dt>
<dd class="mt-1 truncate text-tertiary-500 lg:hidden">[email protected]</dd>
<dt class="sr-only lg:hidden">Role</dt>
<dd class="mt-1 truncate text-tertiary-500 lg:hidden">Member</dd>
<dt class="sr-only lg:hidden">Status</dt>
<dd class="mt-1 truncate text-tertiary-500 sm:hidden"><span class="inline-flex items-center rounded-full bg-success-100 text-success-700 font-medium text-xs px-smSpace py-2xsSpace">
Active
</span></dd>
</dl>
</div>
</div>
</td>
<td class="hidden px-3 py-4 text-sm text-tertiary-500 lg:table-cell">Front-end Developer</td>
<td class="hidden px-3 py-4 text-sm text-tertiary-500 lg:table-cell">[email protected]</td>
<td class="hidden px-3 py-4 text-sm text-tertiary-500 lg:table-cell">Member</td>
<td class="hidden whitespace-nowrap px-3 py-4 text-sm text-tertiary-500 sm:table-cell">
<span class="inline-flex items-center rounded-full bg-success-100 text-success-700 font-medium text-xs px-smSpace py-2xsSpace">
Active
</span>
</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-mdSpace text-right text-sm font-medium sm:pr-lgSpace">
<div class="flex items-center">
<a href="#" class="w-xlSpace h-xlSpace flex items-center justify-center hover:bg-tertiary-100 rounded-lg cursor-pointer 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="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z" />
<path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z" />
</svg>
</a>
<a href="#" class="relative -ml-1 w-xlSpace h-xlSpace flex items-center justify-center hover:bg-tertiary-100 rounded-lg cursor-pointer 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 fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="relative -ml-1 w-xlSpace h-xlSpace flex items-center justify-center hover:bg-tertiary-100 rounded-lg cursor-pointer 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="M3 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM8.5 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM15.5 8.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" />
</svg>
</a>
</div>
</td>
</tr>
<!-- More people... -->
</tbody>
</table>
</div>
</div>
</div>
<div class="max-md:flex max-md:flex-col max-md:space-y-mdSpace">
<span class="flex text-xs text-tertiary-500 md:-mb-lgSpace">Showing 1 to 50 of 100</span>
<nav class="flex items-center justify-center text-xs font-medium leading-none space-x-2xsSpace text-tertiary-700 [&>a]:transition-all [&>a]:duration-100">
<a href="#" class="inline-flex items-center p-xsSpace hover:bg-tertiary-100 rounded-md 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 fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="inline-flex items-center p-xsSpace hover:bg-tertiary-100 rounded-md 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 fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
</svg> </a>
<a href="#" class="inline-flex items-center p-smSpace hover:bg-tertiary-100 rounded-md">1</a>
<a href="#" class="inline-flex items-center p-smSpace bg-tertiary-100 rounded-md" aria-current="page">2</a>
<a href="#" class="inline-flex items-center p-smSpace hover:bg-tertiary-100 rounded-md">3</a>
<a href="#" class="inline-flex items-center p-smSpace hover:bg-tertiary-100 rounded-md">10</a>
<a href="#" class="inline-flex items-center p-smSpace hover:bg-tertiary-100 rounded-md">100</a>
<a href="#" class="inline-flex items-center p-xsSpace hover:bg-tertiary-100 rounded-md 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 fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg> </a>
<a href="#" class="inline-flex items-center p-xsSpace hover:bg-tertiary-100 rounded-md 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 fill-rule="evenodd" d="M10.21 14.77a.75.75 0 01.02-1.06L14.168 10 10.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M4.21 14.77a.75.75 0 01.02-1.06L8.168 10 4.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
<div class="py-lgSpace lg:py-xlSpace">
<footer>
<div class="flex justify-between">
<p class="small text-tertiary-300">© 2022 Your Company, Inc. All rights reserved.</p>
<a href="#" class="btn-tertiary small">Built by Dcode</a>
</div>
</footer>
</div>
</div>
</div>
</div>
</main>
</div>
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJUMg9qwWNHgaiuoDoEgHkn%2Ffractal.dcodegroup.com%3Fnode-id%3D348%253A6407%26t%3DEhc304iBKWNCwFfN-1