<div x-data="{ mobileSidebarOpen: false, desktopSidebarOpen: true }">
<div
id="page-container"
class="mx-auto flex min-h-screen w-full min-w-[320px] flex-col bg-neutral-200 transition-all duration-300 ease-out lg:ps-64"
x-bind:class="{ 'lg:ps-64': desktopSidebarOpen }"
>
<nav
id="page-sidebar"
class="fixed bottom-0 start-0 top-0 z-50 flex h-full w-full flex-col border-neutral-600 bg-white transition-transform duration-300 ease-out lg:w-64 ltr:lg:border-r-2 rtl:lg:border-l-2"
x-bind:class="{
'ltr:-translate-x-full rtl:translate-x-full': !mobileSidebarOpen,
'translate-x-0': mobileSidebarOpen,
'ltr:lg:-translate-x-full rtl:lg:translate-x-full': !desktopSidebarOpen,
'ltr:lg:translate-x-0 rtl:lg:translate-x-0': desktopSidebarOpen,
}"
aria-label="Main Sidebar Navigation"
>
<div
class="flex h-16 w-full flex-none items-center justify-between border-b border-neutral-600 ps-5 lg:pe-4"
>
<a
href="javascript:void(0)"
class="group inline-flex items-center gap-2 font-semibold text-neutral-800 hover:text-neutral-600"
>
<svg
class="hi-outline hi-command-line inline-block h-6 w-6 text-amber-600"
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.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
/>
</svg>
<span>TAILism</span>
</a>
<div class="flex items-center">
<button
type="button"
class="ms-3 inline-flex items-center justify-center p-4 leading-5 text-neutral-800 hover:text-amber-600 focus:outline-none active:text-amber-800 lg:hidden"
x-on:click="mobileSidebarOpen = false"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-solid hi-x-mark inline-block h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
<div class="overflow-y-auto">
<div class="w-full space-y-6 py-4">
<nav class="space-y-1">
<a
href="javascript:void(0)"
class="group flex items-center gap-2 border-y border-neutral-600 bg-amber-100 px-5 py-1 font-medium"
>
<span class="flex flex-none items-center text-amber-700">
<svg
class="hi-outline hi-home inline-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="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
/>
</svg>
</span>
<span class="grow py-2">Dashboard</span>
</a>
</nav>
<nav class="space-y-1">
<a
href="javascript:void(0)"
class="group flex items-center gap-2 border-y border-transparent px-5 py-1 font-medium hover:border-neutral-600 hover:bg-amber-100 active:bg-amber-50"
>
<span
class="flex flex-none items-center text-neutral-600 group-hover:-rotate-12 group-hover:text-amber-700 group-active:rotate-0"
>
<svg
class="hi-outline hi-briefcase inline-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="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z"
/>
</svg>
</span>
<span class="grow py-2">Products</span>
<span
class="rounded-full bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-900 group-active:bg-amber-50"
>5</span
>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 border-y border-transparent px-5 py-1 font-medium hover:border-neutral-600 hover:bg-amber-100 active:bg-amber-50"
>
<span
class="flex flex-none items-center text-neutral-600 group-hover:-rotate-12 group-hover:text-amber-700 group-active:rotate-0"
>
<svg
class="hi-outline hi-user-group inline-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="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
/>
</svg>
</span>
<span class="grow py-2">Customers</span>
<span
class="rounded-full bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-900 group-active:bg-amber-50"
>4.5k</span
>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 border-y border-transparent px-5 py-1 font-medium hover:border-neutral-600 hover:bg-amber-100 active:bg-amber-50"
>
<span
class="flex flex-none items-center text-neutral-600 group-hover:-rotate-12 group-hover:text-amber-700 group-active:rotate-0"
>
<svg
class="hi-outline hi-banknotes inline-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="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
/>
</svg>
</span>
<span class="grow py-2">Payouts</span>
<span
class="rounded-full bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-900 group-active:bg-amber-50"
>1</span
>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 border-y border-transparent px-5 py-1 font-medium hover:border-neutral-600 hover:bg-amber-100 active:bg-amber-50"
>
<span
class="flex flex-none items-center text-neutral-600 group-hover:-rotate-12 group-hover:text-amber-700 group-active:rotate-0"
>
<svg
class="hi-outline hi-presentation-chart-line inline-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 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"
/>
</svg>
</span>
<span class="grow py-2">Analytics</span>
</a>
</nav>
<nav class="space-y-1">
<a
href="javascript:void(0)"
class="group flex items-center gap-2 border-y border-transparent px-5 py-1 font-medium hover:border-neutral-600 hover:bg-amber-100 active:bg-amber-50"
>
<span
class="flex flex-none items-center text-neutral-600 group-hover:-rotate-12 group-hover:text-amber-700 group-active:rotate-0"
>
<svg
class="hi-outline hi-user-circle inline-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="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</span>
<span class="grow py-2">Account</span>
<span
class="rounded-full bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-900 group-active:bg-amber-50"
>3</span
>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 border-y border-transparent px-5 py-1 font-medium hover:border-neutral-600 hover:bg-amber-100 active:bg-amber-50"
>
<span
class="flex flex-none items-center text-neutral-600 group-hover:-rotate-12 group-hover:text-amber-700 group-active:rotate-0"
>
<svg
class="hi-outline hi-cog inline-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="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495"
/>
</svg>
</span>
<span class="grow py-2">Settings</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 border-y border-transparent px-5 py-1 font-medium hover:border-neutral-600 hover:bg-amber-100 active:bg-amber-50"
>
<span
class="flex flex-none items-center text-neutral-600 group-hover:-rotate-12 group-hover:text-amber-700 group-active:rotate-0"
>
<svg
class="hi-outline hi-lock-closed inline-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="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
/>
</svg>
</span>
<span class="grow py-2">Sign out</span>
</a>
</nav>
</div>
</div>
</nav>
<header
id="page-header"
class="fixed end-0 start-0 top-0 z-30 flex h-16 flex-none items-center border-b border-neutral-600 bg-white transition-all duration-300 ease-out lg:ps-64"
x-bind:class="{ 'lg:ps-64': desktopSidebarOpen }"
>
<div
class="container mx-auto flex w-full justify-between px-0 lg:max-w-7xl lg:px-5"
>
<div class="flex flex-none items-center">
<div class="lg:hidden">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center p-4 leading-5 text-neutral-800 hover:text-amber-600 focus:outline-none active:text-amber-800"
>
<svg
class="hi-outline hi-command-line inline-block h-6 w-6 text-amber-600"
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.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
/>
</svg>
</a>
</div>
</div>
<div class="flex grow items-center">
<form class="w-full" onsubmit="return false;">
<div class="relative">
<div
class="pointer-events-none absolute inset-y-0 start-0 my-px me-px flex w-10 items-center justify-center text-neutral-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-solid hi-magnifying-glass h-5 w-5"
>
<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
class="block w-full rounded border-none py-4 ps-10 leading-5 focus:border-neutral-600 focus:ring focus:ring-neutral-600/25"
type="text"
id="search"
name="search"
placeholder="Search application.."
/>
</div>
</form>
</div>
<div class="flex flex-none items-center gap-2">
<div class="lg:hidden">
<button
type="button"
class="inline-flex items-center justify-center p-4 leading-5 text-neutral-800 hover:text-amber-600 focus:outline-none active:text-amber-800"
x-on:click="mobileSidebarOpen = true"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-solid hi-menu-alt-1 inline-block h-5 w-5"
>
<path
fill-rule="evenodd"
d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
</header>
<main
id="page-content"
class="flex max-w-full flex-auto flex-col bg-white/50 pt-16"
>
<div class="border-b border-neutral-200 py-3">
<div
class="container mx-auto flex w-full flex-col items-center gap-5 p-4 text-center sm:flex-row sm:justify-between sm:text-start lg:p-8 xl:max-w-7xl"
>
<div class="grow">
<h1 class="mb-2 text-3xl">Welcome John</h1>
<h2 class="text-neutral-800">
You have 25 sales today, keep it up!
</h2>
</div>
<div class="flex flex-none gap-2">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded border border-neutral-600 px-4 py-2 text-sm font-semibold leading-5 text-black hover:border-black hover:bg-amber-100 active:bg-amber-50"
>
<svg
class="hi-mini hi-users inline-block h-5 w-5 opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M7 8a3 3 0 100-6 3 3 0 000 6zM14.5 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM1.615 16.428a1.224 1.224 0 01-.569-1.175 6.002 6.002 0 0111.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 017 18a9.953 9.953 0 01-5.385-1.572zM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 00-1.588-3.755 4.502 4.502 0 015.874 2.636.818.818 0 01-.36.98A7.465 7.465 0 0114.5 16z"
/>
</svg>
<span>Affiliates</span>
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded border border-neutral-600 px-4 py-2 text-sm font-semibold leading-5 text-black hover:border-black hover:bg-amber-100 active:bg-amber-50"
>
<svg
class="hi-mini hi-building-storefront inline-block h-5 w-5 opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M2.879 7.121A3 3 0 007.5 6.66a2.997 2.997 0 002.5 1.34 2.997 2.997 0 002.5-1.34 3 3 0 104.622-3.78l-.293-.293A2 2 0 0015.415 2H4.585a2 2 0 00-1.414.586l-.292.292a3 3 0 000 4.243zM3 9.032a4.507 4.507 0 004.5-.29A4.48 4.48 0 0010 9.5a4.48 4.48 0 002.5-.758 4.507 4.507 0 004.5.29V16.5h.25a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75v-3.5a.75.75 0 00-.75-.75h-2.5a.75.75 0 00-.75.75v3.5a.75.75 0 01-.75.75h-4.5a.75.75 0 010-1.5H3V9.032z"
/>
</svg>
<span>View Store</span>
</a>
</div>
</div>
</div>
<div class="container mx-auto w-full p-4 lg:p-8 xl:max-w-7xl">
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:gap-8">
<div class="rounded border border-neutral-600 bg-white p-5">
<h4 class="mb-0.5 text-xl text-black">Latest Sales</h4>
<h5 class="text-sm font-medium text-neutral-500">
853 sales this month
</h5>
<svg
class="w-full text-neutral-700"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<path
fill="currentColor"
d="M0 900h42.667V600.398q0-21.333-21.334-21.333Q0 579.065 0 600.398Zm53.333 0H96V389.729q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V577.829q0-21.334-21.333-21.334t-21.333 21.334ZM160 900h42.667V624.444q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H256V283.267q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V545.787q0-21.334-21.333-21.334t-21.333 21.334ZM320 900h42.667V226.579q0-21.334-21.334-21.334-21.333 0-21.333 21.334Zm53.333 0H416V623.448q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V276.85q0-21.333-21.333-21.333t-21.333 21.333ZM480 900h42.667V563.102q0-21.334-21.334-21.334-21.333 0-21.333 21.334Zm53.333 0H576V119.146q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V575.184q0-21.333-21.333-21.333t-21.333 21.333ZM640 900h42.667V179.49q0-21.334-21.334-21.334-21.333 0-21.333 21.333Zm53.333 0H736V540.382q0-21.334-21.333-21.334-21.334 0-21.334 21.334Zm53.334 0h42.666V548.257q0-21.334-21.333-21.334t-21.333 21.334ZM800 900h42.667V341.126q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H896V400.394q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V562.94q0-21.333-21.333-21.333t-21.333 21.333ZM960 900h42.667V559.517q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H1056V668.01q0-21.334-21.333-21.334-21.334 0-21.334 21.333Zm53.334 0h42.666V217.535q0-21.334-21.333-21.334t-21.333 21.334Zm53.333 0h42.667V636.608q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H1216V187.587q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V736.995q0-21.333-21.333-21.333t-21.333 21.333Zm53.333 0h42.667V209.177q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H1376V602.813q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V424.599q0-21.334-21.333-21.334t-21.333 21.334Zm53.333 0h42.667V317.384q0-21.334-21.334-21.334-21.333 0-21.333 21.334Zm53.333 0H1536V245.005q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V630.135q0-21.333-21.333-21.333t-21.333 21.333Z"
/>
</svg>
</div>
<div class="rounded border border-neutral-600 bg-white p-5">
<h4 class="mb-0.5 text-xl text-black">Pageviews</h4>
<h5 class="text-sm font-medium text-neutral-500">
65,5k this month
</h5>
<svg
class="w-full text-neutral-700"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<path
fill="currentColor"
d="M0 900h42.667V266.512q0-21.333-21.334-21.333Q0 245.18 0 266.512Zm53.333 0H96V443.606q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V244.82q0-21.333-21.333-21.333t-21.333 21.333ZM160 900h42.667V319.226q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H256V242.242q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V727.687q0-21.333-21.333-21.333t-21.333 21.333ZM320 900h42.667V647.18q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H416V617.829q0-21.334-21.333-21.334-21.334 0-21.334 21.334Zm53.334 0h42.666V675.164q0-21.334-21.333-21.334t-21.333 21.334ZM480 900h42.667V729.177q0-21.334-21.334-21.334-21.333 0-21.333 21.334Zm53.333 0H576V419.476q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V297.165q0-21.334-21.333-21.334t-21.333 21.334ZM640 900h42.667V507.204q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H736V535.061q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V478.475q0-21.334-21.333-21.334t-21.333 21.334ZM800 900h42.667V416.806q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H896V465.563q0-21.334-21.333-21.334-21.334 0-21.334 21.334Zm53.334 0h42.666V139.91q0-21.334-21.333-21.334t-21.333 21.334ZM960 900h42.667V594.062q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H1056V503.441q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V325.772q0-21.333-21.333-21.333t-21.333 21.333Zm53.333 0h42.667V496.933q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H1216V721.1q0-21.334-21.333-21.334-21.334 0-21.334 21.333Zm53.334 0h42.666V669.524q0-21.333-21.333-21.333t-21.333 21.333Zm53.333 0h42.667V430.213q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H1376V133.275q0-21.334-21.333-21.334-21.334 0-21.334 21.334Zm53.334 0h42.666V496.454q0-21.333-21.333-21.333t-21.333 21.333Zm53.333 0h42.667V237.614q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H1536V363.834q0-21.334-21.333-21.334-21.334 0-21.334 21.334Zm53.334 0h42.666V682.105q0-21.333-21.333-21.333t-21.333 21.333Z"
/>
</svg>
</div>
<div class="rounded border border-neutral-600 bg-white p-5">
<h4 class="mb-0.5 text-xl text-black">Total Customers</h4>
<h5 class="text-sm font-medium text-neutral-500">
4,500 accounts
</h5>
<svg
class="w-full text-neutral-700"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<path
fill="currentColor"
d="M0 900h42.667m10.666 0H96v-8.037q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666v-16.547q0-21.333-21.333-21.333t-21.333 21.333ZM160 900h42.667v-49.866q0-21.334-21.334-21.334Q160 828.8 160 850.134Zm53.333 0H256v-81.189q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V785.764q0-21.334-21.333-21.334t-21.333 21.334ZM320 900h42.667v-83.548q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H416V728.239q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V782.597q0-21.333-21.333-21.333t-21.333 21.333ZM480 900h42.667V673.085q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H576V637.041q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V591.812q0-21.333-21.333-21.333t-21.333 21.333ZM640 900h42.667V708.44q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H736V564.788q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V537.128q0-21.333-21.333-21.333t-21.333 21.333ZM800 900h42.667V471.438q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H896V526.262q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V414.706q0-21.333-21.333-21.333t-21.333 21.333ZM960 900h42.667V535.109q0-21.334-21.334-21.334-21.333 0-21.333 21.334Zm53.333 0H1056V361.456q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V329.76q0-21.334-21.333-21.334t-21.333 21.334Zm53.333 0h42.667V456.857q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H1216V576.075q0-21.334-21.333-21.334-21.334 0-21.334 21.334Zm53.334 0h42.666V234.336q0-21.333-21.333-21.333t-21.333 21.333Zm53.333 0h42.667V386.211q0-21.333-21.334-21.333-21.333 0-21.333 21.333Zm53.333 0H1376V489.28q0-21.334-21.333-21.334-21.334 0-21.334 21.334Zm53.334 0h42.666V481.674q0-21.333-21.333-21.333t-21.333 21.333Zm53.333 0h42.667V308.787q0-21.334-21.334-21.334-21.333 0-21.333 21.334Zm53.333 0H1536V341.07q0-21.333-21.333-21.333-21.334 0-21.334 21.333Zm53.334 0h42.666V199.196q0-21.333-21.333-21.333t-21.333 21.333Z"
/>
</svg>
</div>
<div
class="rounded border border-neutral-600 bg-white md:col-span-3"
>
<div
class="flex flex-col gap-5 p-5 md:flex-row md:items-center"
>
<div class="grow">
<h4 class="mb-0.5 text-xl text-black">Sales Today</h4>
<h5 class="text-sm font-medium text-neutral-500">
25 new sales today
</h5>
</div>
<div class="flex-none">
<form onsumbit="return false;">
<div class="relative">
<div
class="pointer-events-none absolute inset-y-0 start-0 my-px me-px flex w-10 items-center justify-center text-neutral-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-solid hi-magnifying-glass h-5 w-5"
>
<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
class="block w-full rounded py-4 ps-10 leading-5 focus:border-neutral-600 focus:ring focus:ring-neutral-600/25"
type="text"
id="search_sales"
name="search_sales"
placeholder="Search sales.."
/>
</div>
</form>
</div>
</div>
<div class="min-w-full overflow-x-auto">
<table
class="min-w-full whitespace-nowrap align-middle text-sm"
>
<thead>
<tr class="border-y border-neutral-600">
<th
class="px-4 py-4 text-start font-semibold text-neutral-900"
>
Product
</th>
<th
class="px-4 py-4 text-start font-semibold text-neutral-900"
>
Name
</th>
<th
class="px-4 py-4 text-start font-semibold text-neutral-900"
>
Email
</th>
<th
class="px-4 py-4 text-start font-semibold text-neutral-900"
>
When?
</th>
<th
class="px-4 py-4 text-end font-semibold text-neutral-900"
>
Amount
</th>
<th
class="px-4 py-4 text-end font-semibold text-neutral-900"
></th>
</tr>
</thead>
<tbody>
<tr class="border-b border-neutral-300 hover:bg-amber-50">
<td class="p-4">Admin Template</td>
<td class="p-4">Nansi Hart</td>
<td class="p-4">n.hart@example.com</td>
<td class="p-4">2 hours ago</td>
<td class="p-4 text-end">
<div
class="inline-flex rounded-full bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-900"
>
$29,00
</div>
</td>
<td class="p-3 text-end">
<button
type="button"
class="inline-flex items-center justify-center rounded border border-neutral-600 px-4 py-2 text-sm font-semibold leading-5 text-black hover:border-black hover:bg-amber-100 active:bg-amber-50"
>
View Sale
</button>
</td>
</tr>
<tr class="border-b border-neutral-300 hover:bg-amber-50">
<td class="p-4">UI Library</td>
<td class="p-4">Mark Spencer</td>
<td class="p-4">m.spencer@example.com</td>
<td class="p-4">2 hours ago</td>
<td class="p-4 text-end">
<div
class="inline-flex rounded-full bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-900"
>
$249,00
</div>
</td>
<td class="p-3 text-end">
<button
type="button"
class="inline-flex items-center justify-center rounded border border-neutral-600 px-4 py-2 text-sm font-semibold leading-5 text-black hover:border-black hover:bg-amber-100 active:bg-amber-50"
>
View Sale
</button>
</td>
</tr>
<tr class="border-b border-neutral-300 hover:bg-amber-50">
<td class="p-4">UI Library</td>
<td class="p-4">Xavier Rosales</td>
<td class="p-4">x.rosales@example.com</td>
<td class="p-4">4 hours ago</td>
<td class="p-4 text-end">
<div
class="inline-flex rounded-full bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-900"
>
$249,00
</div>
</td>
<td class="p-3 text-end">
<button
type="button"
class="inline-flex items-center justify-center rounded border border-neutral-600 px-4 py-2 text-sm font-semibold leading-5 text-black hover:border-black hover:bg-amber-100 active:bg-amber-50"
>
View Sale
</button>
</td>
</tr>
<tr class="border-b border-neutral-300 hover:bg-amber-50">
<td class="p-4">Next.js Blog</td>
<td class="p-4">Danyal Clark</td>
<td class="p-4">danyal.clark@example.com</td>
<td class="p-4">7 hours ago</td>
<td class="p-4 text-end">
<div
class="inline-flex rounded-full bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-900"
>
$129,00
</div>
</td>
<td class="p-3 text-end">
<button
type="button"
class="inline-flex items-center justify-center rounded border border-neutral-600 px-4 py-2 text-sm font-semibold leading-5 text-black hover:border-black hover:bg-amber-100 active:bg-amber-50"
>
View Sale
</button>
</td>
</tr>
<tr class="border-b border-neutral-300 hover:bg-amber-50">
<td class="p-4">Dashboard Kit</td>
<td class="p-4">Lia Baker</td>
<td class="p-4">l.baker@example.com</td>
<td class="p-4">7 hours ago</td>
<td class="p-4 text-end">
<div
class="inline-flex rounded-full bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-900"
>
$49,00
</div>
</td>
<td class="p-3 text-end">
<button
type="button"
class="inline-flex items-center justify-center rounded border border-neutral-600 px-4 py-2 text-sm font-semibold leading-5 text-black hover:border-black hover:bg-amber-100 active:bg-amber-50"
>
View Sale
</button>
</td>
</tr>
<tr class="border-b border-neutral-300 hover:bg-amber-50">
<td class="p-4">Logo Figma Pack</td>
<td class="p-4">Mike Dusan</td>
<td class="p-4">m.dusan@example.com</td>
<td class="p-4">8 hours ago</td>
<td class="p-4 text-end">
<div
class="inline-flex rounded-full bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-900"
>
$149,00
</div>
</td>
<td class="p-3 text-end">
<button
type="button"
class="inline-flex items-center justify-center rounded border border-neutral-600 px-4 py-2 text-sm font-semibold leading-5 text-black hover:border-black hover:bg-amber-100 active:bg-amber-50"
>
View Sale
</button>
</td>
</tr>
</tbody>
</table>
<div
class="flex items-center justify-between p-4 text-center"
>
<div class="text-sm text-neutral-700">
<strong class="font-semibold">6</strong> of
<strong class="font-semibold">25</strong> sales
</div>
<button
type="button"
class="inline-flex items-center justify-center gap-1 rounded border border-neutral-600 px-3 py-1.5 text-sm font-semibold leading-5 text-black hover:border-black hover:bg-amber-100 active:bg-amber-50"
>
<svg
class="hi-mini hi-arrow-down inline-block h-5 w-5 opacity-50"
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>Load More..</span>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<footer
id="page-footer"
class="flex grow-0 items-center border-t border-neutral-600 bg-white"
>
<div
class="container mx-auto flex flex-col gap-2 px-4 py-6 text-center text-sm font-medium text-neutral-600 md:flex-row md:justify-between md:gap-0 md:text-start lg:px-8 xl:max-w-7xl"
>
<div>© <span class="font-semibold">TAILism</span></div>
<div class="inline-flex items-center justify-center">
<span>Crafted with</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
class="mx-1 h-4 w-4 text-red-600"
>
<path
d="M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 01-1.162-.682 22.045 22.045 0 01-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 018-2.828A4.5 4.5 0 0118 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 01-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 01-.69.001l-.002-.001z"
></path>
</svg>
<span
>by
<a
class="font-medium text-amber-600 transition hover:text-amber-700"
href="https://pixelcave.com"
target="_blank"
>pixelcave</a
></span
>
</div>
</div>
</footer>
</div>
</div>