Tailism
A sales dashboard inspired by brutalism design
<!--
Tailism - A sales dashboard inspired by brutalism design
Created by John Champ
Founder of Pixelcave -> https://pixelcave.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="{ mobileSidebarOpen: false, desktopSidebarOpen: true }">
<!-- Page Container -->
<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 }"
>
<!-- Page Sidebar -->
<nav
id="page-sidebar"
class="fixed start-0 top-0 bottom-0 z-50 flex h-full w-full flex-col border-neutral-600 bg-white transition-transform duration-300 ease-out lg:w-64 lg:ltr:border-r-2 lg:rtl:border-l-2"
x-bind:class="{
'ltr:-translate-x-full rtl:translate-x-full': !mobileSidebarOpen,
'translate-x-0': mobileSidebarOpen,
'lg:ltr:-translate-x-full lg:rtl:translate-x-full': !desktopSidebarOpen,
'lg:ltr:translate-x-0 lg:rtl:translate-x-0': desktopSidebarOpen,
}"
aria-label="Main Sidebar Navigation"
>
<!-- Sidebar Header -->
<div
class="flex h-16 w-full flex-none items-center justify-between border-b border-neutral-600 ps-5 lg:pe-4"
>
<!-- Brand -->
<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 size-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>
<!-- END Brand -->
<!-- Extra Actions -->
<div class="flex items-center">
<!-- Close Sidebar on Mobile -->
<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-hidden 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 size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
<!-- END Close Sidebar on Mobile -->
</div>
<!-- END Extra Actions -->
</div>
<!-- END Sidebar Header -->
<!-- Sidebar Navigation -->
<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 size-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 size-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 size-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 size-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 size-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 size-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 size-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 size-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>
<!-- END Sidebar Navigation -->
</nav>
<!-- END Page Sidebar -->
<!-- Page Header -->
<header
id="page-header"
class="fixed start-0 end-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"
>
<!-- Left Section -->
<div class="flex flex-none items-center">
<!-- Brand on Mobile -->
<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-hidden active:text-amber-800"
>
<svg
class="hi-outline hi-command-line inline-block size-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>
<!-- END Brand on Mobile -->
</div>
<!-- END Left Section -->
<!-- Main Section -->
<div class="flex grow items-center">
<!-- Search -->
<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 size-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-sm border-none py-4 ps-10 leading-5 focus:border-neutral-600 focus:ring-3 focus:ring-neutral-600/25"
type="text"
id="search"
name="search"
placeholder="Search application.."
/>
</div>
</form>
<!-- END Search -->
</div>
<!-- END Main Section -->
<!-- Right Section -->
<div class="flex flex-none items-center gap-2">
<!-- Toggle Sidebar on Mobile -->
<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-hidden 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 size-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>
<!-- END Toggle Sidebar on Mobile -->
</div>
<!-- END Right Section -->
</div>
</header>
<!-- END Page Header -->
<!-- Page Content -->
<main
id="page-content"
class="flex max-w-full flex-auto flex-col bg-white/50 pt-16"
>
<!-- Page Section -->
<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-sm border border-neutral-600 px-4 py-2 text-sm leading-5 font-semibold text-black hover:border-black hover:bg-amber-100 active:bg-amber-50"
>
<svg
class="hi-mini hi-users inline-block size-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-sm border border-neutral-600 px-4 py-2 text-sm leading-5 font-semibold text-black hover:border-black hover:bg-amber-100 active:bg-amber-50"
>
<svg
class="hi-mini hi-building-storefront inline-block size-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>
<!-- END Page Section -->
<!-- Page Section -->
<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">
<!-- Latest Sales -->
<div class="rounded-sm 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>
<!-- END Latest Sales -->
<!-- Pageviews -->
<div class="rounded-sm 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>
<!-- END Pageviews -->
<!-- Total Customers -->
<div class="rounded-sm 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>
<!-- END Total Customers -->
<!-- Sales Today -->
<div
class="rounded-sm border border-neutral-600 bg-white md:col-span-3"
>
<!-- Sales Today Header -->
<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 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 size-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-sm py-4 ps-10 leading-5 focus:border-neutral-600 focus:ring-3 focus:ring-neutral-600/25"
type="text"
id="search_sales"
name="search_sales"
placeholder="Search sales.."
/>
</div>
</form>
</div>
</div>
<!-- END Sales Today Header -->
<!-- Sales Today Table -->
<div class="min-w-full overflow-x-auto">
<table
class="min-w-full align-middle text-sm whitespace-nowrap"
>
<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-sm border border-neutral-600 px-4 py-2 text-sm leading-5 font-semibold 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-sm border border-neutral-600 px-4 py-2 text-sm leading-5 font-semibold 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-sm border border-neutral-600 px-4 py-2 text-sm leading-5 font-semibold 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-sm border border-neutral-600 px-4 py-2 text-sm leading-5 font-semibold 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-sm border border-neutral-600 px-4 py-2 text-sm leading-5 font-semibold 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-sm border border-neutral-600 px-4 py-2 text-sm leading-5 font-semibold 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-sm border border-neutral-600 px-3 py-1.5 text-sm leading-5 font-semibold text-black hover:border-black hover:bg-amber-100 active:bg-amber-50"
>
<svg
class="hi-mini hi-arrow-down inline-block size-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>
<!-- END Sales Today Table -->
</div>
<!-- END Sales Today -->
</div>
</div>
<!-- END Page Section -->
</main>
<!-- END Page Content -->
<!-- Page Footer -->
<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 size-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>
<!-- 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.