Tailstats
Super modern analytics dashboard with dark mode support
<!--
Tailstats - Super modern analytics dashboard with dark mode support
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="{ darkMode: false, domainDropdownOpen: false }"
x-bind:class="{ 'dark': darkMode }"
>
<!-- Page Container -->
<div
id="page-container"
class="mx-auto flex min-h-screen w-full min-w-[320px] flex-col bg-zinc-100 dark:bg-zinc-900 dark:text-zinc-100"
>
<!-- Page Header -->
<header
id="page-header"
class="fixed start-0 end-0 top-0 z-50 flex flex-none items-center"
>
<div class="container mx-auto pt-4 sm:px-2 lg:pt-8 xl:max-w-6xl">
<div
class="flex justify-between bg-zinc-200/80 px-4 py-2.5 backdrop-blur-xs sm:rounded-2xl sm:px-6 dark:bg-zinc-800/80"
>
<!-- Left Section -->
<div class="flex items-center">
<!-- Logo -->
<a
href="javascript:void(0)"
class="group inline-flex items-center gap-1.5 text-lg font-extrabold tracking-wide text-zinc-900 active:text-zinc-600 dark:text-zinc-100 dark:active:text-zinc-400"
>
<svg
class="hi-mini hi-chart-bar inline-block size-5 origin-bottom-left text-pink-500 transition group-hover:-rotate-6 group-active:rotate-0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M15.5 2A1.5 1.5 0 0014 3.5v13a1.5 1.5 0 001.5 1.5h1a1.5 1.5 0 001.5-1.5v-13A1.5 1.5 0 0016.5 2h-1zM9.5 6A1.5 1.5 0 008 7.5v9A1.5 1.5 0 009.5 18h1a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0010.5 6h-1zM3.5 10A1.5 1.5 0 002 11.5v5A1.5 1.5 0 003.5 18h1A1.5 1.5 0 006 16.5v-5A1.5 1.5 0 004.5 10h-1z"
/>
</svg>
<span>tailstats</span>
</a>
<!-- END Logo -->
</div>
<!-- END Left Section -->
<!-- Right Section -->
<div class="flex items-center gap-2">
<!-- Doamin Dropdown -->
<div class="relative inline-block">
<!-- Dropdown Toggle Button -->
<button
type="button"
class="group flex items-center justify-between gap-1.5 rounded-xl px-3 py-2.5 text-sm font-semibold text-zinc-900 hover:bg-white hover:text-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-950/50 dark:hover:text-zinc-200"
id="dropdown-domains"
aria-haspopup="true"
x-bind:aria-expanded="domainDropdownOpen"
x-on:click="domainDropdownOpen = true"
>
<span>example.com</span>
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-chevron-down inline-block size-5 text-zinc-400"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
<!-- END Dropdown Toggle Button -->
<!-- Dropdown -->
<div
x-cloak
x-show="domainDropdownOpen"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1"
x-on:click.outside="domainDropdownOpen = false"
role="menu"
aria-labelledby="dropdown-domains"
class="absolute end-0 mt-2 w-48 origin-top rounded-2xl shadow-xl shadow-zinc-200 dark:shadow-zinc-950"
>
<div
class="divide-y divide-zinc-100 rounded-2xl bg-white ring-1 ring-zinc-900/5 dark:divide-zinc-900 dark:bg-zinc-800 dark:ring-zinc-950/75"
>
<div class="space-y-1 p-2.5">
<a
role="menuitem"
href="javascript:void(0)"
class="group flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-100 dark:hover:bg-zinc-900/50 dark:hover:text-white"
>
<svg
class="hi-mini hi-globe-alt inline-block size-5 text-zinc-300 group-hover:text-pink-500 dark:text-zinc-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M16.555 5.412a8.028 8.028 0 00-3.503-2.81 14.899 14.899 0 011.663 4.472 8.547 8.547 0 001.84-1.662zM13.326 7.825a13.43 13.43 0 00-2.413-5.773 8.087 8.087 0 00-1.826 0 13.43 13.43 0 00-2.413 5.773A8.473 8.473 0 0010 8.5c1.18 0 2.304-.24 3.326-.675zM6.514 9.376A9.98 9.98 0 0010 10c1.226 0 2.4-.22 3.486-.624a13.54 13.54 0 01-.351 3.759A13.54 13.54 0 0110 13.5c-1.079 0-2.128-.127-3.134-.366a13.538 13.538 0 01-.352-3.758zM5.285 7.074a14.9 14.9 0 011.663-4.471 8.028 8.028 0 00-3.503 2.81c.529.638 1.149 1.199 1.84 1.66zM17.334 6.798a7.973 7.973 0 01.614 4.115 13.47 13.47 0 01-3.178 1.72 15.093 15.093 0 00.174-3.939 10.043 10.043 0 002.39-1.896zM2.666 6.798a10.042 10.042 0 002.39 1.896 15.196 15.196 0 00.174 3.94 13.472 13.472 0 01-3.178-1.72 7.973 7.973 0 01.615-4.115zM10 15c.898 0 1.778-.079 2.633-.23a13.473 13.473 0 01-1.72 3.178 8.099 8.099 0 01-1.826 0 13.47 13.47 0 01-1.72-3.178c.855.151 1.735.23 2.633.23zM14.357 14.357a14.912 14.912 0 01-1.305 3.04 8.027 8.027 0 004.345-4.345c-.953.542-1.971.981-3.04 1.305zM6.948 17.397a8.027 8.027 0 01-4.345-4.345c.953.542 1.971.981 3.04 1.305a14.912 14.912 0 001.305 3.04z"
/>
</svg>
<span>example.ai</span>
</a>
<a
role="menuitem"
href="javascript:void(0)"
class="group flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-100 dark:hover:bg-zinc-900/50 dark:hover:text-white"
>
<svg
class="hi-mini hi-globe-alt inline-block size-5 text-zinc-300 group-hover:text-pink-500 dark:text-zinc-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M16.555 5.412a8.028 8.028 0 00-3.503-2.81 14.899 14.899 0 011.663 4.472 8.547 8.547 0 001.84-1.662zM13.326 7.825a13.43 13.43 0 00-2.413-5.773 8.087 8.087 0 00-1.826 0 13.43 13.43 0 00-2.413 5.773A8.473 8.473 0 0010 8.5c1.18 0 2.304-.24 3.326-.675zM6.514 9.376A9.98 9.98 0 0010 10c1.226 0 2.4-.22 3.486-.624a13.54 13.54 0 01-.351 3.759A13.54 13.54 0 0110 13.5c-1.079 0-2.128-.127-3.134-.366a13.538 13.538 0 01-.352-3.758zM5.285 7.074a14.9 14.9 0 011.663-4.471 8.028 8.028 0 00-3.503 2.81c.529.638 1.149 1.199 1.84 1.66zM17.334 6.798a7.973 7.973 0 01.614 4.115 13.47 13.47 0 01-3.178 1.72 15.093 15.093 0 00.174-3.939 10.043 10.043 0 002.39-1.896zM2.666 6.798a10.042 10.042 0 002.39 1.896 15.196 15.196 0 00.174 3.94 13.472 13.472 0 01-3.178-1.72 7.973 7.973 0 01.615-4.115zM10 15c.898 0 1.778-.079 2.633-.23a13.473 13.473 0 01-1.72 3.178 8.099 8.099 0 01-1.826 0 13.47 13.47 0 01-1.72-3.178c.855.151 1.735.23 2.633.23zM14.357 14.357a14.912 14.912 0 01-1.305 3.04 8.027 8.027 0 004.345-4.345c-.953.542-1.971.981-3.04 1.305zM6.948 17.397a8.027 8.027 0 01-4.345-4.345c.953.542 1.971.981 3.04 1.305a14.912 14.912 0 001.305 3.04z"
/>
</svg>
<span>example.io</span>
</a>
<a
role="menuitem"
href="javascript:void(0)"
class="group flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-100 dark:hover:bg-zinc-900/50 dark:hover:text-white"
>
<svg
class="hi-mini hi-globe-alt inline-block size-5 text-zinc-300 group-hover:text-pink-500 dark:text-zinc-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M16.555 5.412a8.028 8.028 0 00-3.503-2.81 14.899 14.899 0 011.663 4.472 8.547 8.547 0 001.84-1.662zM13.326 7.825a13.43 13.43 0 00-2.413-5.773 8.087 8.087 0 00-1.826 0 13.43 13.43 0 00-2.413 5.773A8.473 8.473 0 0010 8.5c1.18 0 2.304-.24 3.326-.675zM6.514 9.376A9.98 9.98 0 0010 10c1.226 0 2.4-.22 3.486-.624a13.54 13.54 0 01-.351 3.759A13.54 13.54 0 0110 13.5c-1.079 0-2.128-.127-3.134-.366a13.538 13.538 0 01-.352-3.758zM5.285 7.074a14.9 14.9 0 011.663-4.471 8.028 8.028 0 00-3.503 2.81c.529.638 1.149 1.199 1.84 1.66zM17.334 6.798a7.973 7.973 0 01.614 4.115 13.47 13.47 0 01-3.178 1.72 15.093 15.093 0 00.174-3.939 10.043 10.043 0 002.39-1.896zM2.666 6.798a10.042 10.042 0 002.39 1.896 15.196 15.196 0 00.174 3.94 13.472 13.472 0 01-3.178-1.72 7.973 7.973 0 01.615-4.115zM10 15c.898 0 1.778-.079 2.633-.23a13.473 13.473 0 01-1.72 3.178 8.099 8.099 0 01-1.826 0 13.47 13.47 0 01-1.72-3.178c.855.151 1.735.23 2.633.23zM14.357 14.357a14.912 14.912 0 01-1.305 3.04 8.027 8.027 0 004.345-4.345c-.953.542-1.971.981-3.04 1.305zM6.948 17.397a8.027 8.027 0 01-4.345-4.345c.953.542 1.971.981 3.04 1.305a14.912 14.912 0 001.305 3.04z"
/>
</svg>
<span>example.eu</span>
</a>
</div>
<div class="space-y-1 p-2.5">
<a
role="menuitem"
href="javascript:void(0)"
class="group flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-100 dark:hover:bg-zinc-900/50 dark:hover:text-white"
>
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-user-circle inline-block size-5 text-zinc-300 group-hover:text-pink-500 dark:text-zinc-600"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
clip-rule="evenodd"
></path>
</svg>
<span>Account</span>
</a>
</div>
<div class="space-y-1 p-2.5">
<form onsubmit="return false;">
<button
type="submit"
role="menuitem"
class="group flex w-full items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-100 dark:hover:bg-zinc-900/50 dark:hover:text-white"
>
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-lock-closed inline-block size-5 text-zinc-300 group-hover:text-pink-500 dark:text-zinc-600"
>
<path
fill-rule="evenodd"
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Sign Out</span>
</button>
</form>
</div>
</div>
</div>
<!-- END Dropdown -->
</div>
<!-- END Doamin Dropdown -->
</div>
<!-- END Right Section -->
</div>
</div>
</header>
<!-- END Page Header -->
<!-- Page Content -->
<main
id="page-content"
class="flex max-w-full flex-auto flex-col pt-[74px] lg:pt-[90px]"
>
<div class="container mx-auto p-4 lg:p-8 xl:max-w-6xl">
<div
class="mb-6 flex items-center justify-between gap-4 border-b border-dashed border-zinc-300 pb-2 dark:border-zinc-700"
>
<!-- Page Heading -->
<h1 class="text-lg font-bold">Dashboard</h1>
<div class="flex items-center justify-center gap-1">
<!-- Dark Mode Toggle -->
<button
type="button"
class="flex items-center justify-between gap-1.5 rounded-xl px-2 py-2 text-sm font-semibold text-zinc-400 hover:bg-zinc-200 hover:text-zinc-600 active:bg-zinc-200 active:text-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-400 dark:active:bg-zinc-700 dark:active:text-zinc-300"
x-on:click="darkMode = !darkMode"
>
<svg
x-show="darkMode"
class="hi-mini hi-sun inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
/>
</svg>
<svg
x-cloak
x-show="!darkMode"
class="hi-mini hi-moon inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z"
clip-rule="evenodd"
/>
</svg>
</button>
<!-- END Dark Mode Toggle -->
<!-- Notifications -->
<a
href="javascript:void(0)"
class="relative flex items-center justify-between gap-1.5 rounded-xl px-2 py-2 text-sm font-semibold text-zinc-400 hover:bg-zinc-200 hover:text-zinc-600 active:bg-zinc-200 active:text-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-400 dark:active:bg-zinc-700 dark:active:text-zinc-300"
>
<div
class="absolute end-0 top-0 -me-1 -mt-1 flex size-5 items-center justify-center rounded-full bg-pink-200 text-xs text-pink-700"
>
5
</div>
<svg
class="hi-mini hi-bell-alert inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M4.214 3.227a.75.75 0 00-1.156-.956 8.97 8.97 0 00-1.856 3.826.75.75 0 001.466.316 7.47 7.47 0 011.546-3.186zM16.942 2.271a.75.75 0 00-1.157.956 7.47 7.47 0 011.547 3.186.75.75 0 001.466-.316 8.971 8.971 0 00-1.856-3.826z"
/>
<path
fill-rule="evenodd"
d="M10 2a6 6 0 00-6 6c0 1.887-.454 3.665-1.257 5.234a.75.75 0 00.515 1.076 32.94 32.94 0 003.256.508 3.5 3.5 0 006.972 0 32.933 32.933 0 003.256-.508.75.75 0 00.515-1.076A11.448 11.448 0 0116 8a6 6 0 00-6-6zm0 14.5a2 2 0 01-1.95-1.557 33.54 33.54 0 003.9 0A2 2 0 0110 16.5z"
clip-rule="evenodd"
/>
</svg>
</a>
<!-- END Notifications -->
<!-- User Account -->
<a
href="javascript:void(0)"
class="flex items-center justify-between gap-1.5 rounded-xl px-2 py-2 text-sm font-semibold text-zinc-400 hover:bg-zinc-200 hover:text-zinc-600 active:bg-zinc-200 active:text-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-400 dark:active:bg-zinc-700 dark:active:text-zinc-300"
>
<svg
class="hi-mini hi-user-circle inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-5.5-2.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10 12a5.99 5.99 0 00-4.793 2.39A6.483 6.483 0 0010 16.5a6.483 6.483 0 004.793-2.11A5.99 5.99 0 0010 12z"
clip-rule="evenodd"
/>
</svg>
</a>
<!-- END User Account -->
</div>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-12 lg:gap-8">
<!-- Quick Stats -->
<div
class="rounded-2xl bg-white p-6 ring-1 shadow-sm shadow-zinc-200 ring-zinc-200/10 sm:col-span-6 xl:col-span-3 dark:bg-zinc-800 dark:shadow-zinc-800"
>
<div
class="flex items-center text-sm font-medium text-emerald-500"
>
<span>5%</span>
<svg
class="hi-mini hi-arrow-small-up inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 15a.75.75 0 01-.75-.75V7.612L7.29 9.77a.75.75 0 01-1.08-1.04l3.25-3.5a.75.75 0 011.08 0l3.25 3.5a.75.75 0 11-1.08 1.04l-1.96-2.158v6.638A.75.75 0 0110 15z"
clip-rule="evenodd"
/>
</svg>
</div>
<dl>
<dt class="text-xl font-extrabold">97,623</dt>
<dd
class="text-sm font-medium text-zinc-500 dark:text-zinc-400"
>
Pageviews
</dd>
</dl>
</div>
<div
class="rounded-2xl bg-white p-6 ring-1 shadow-sm shadow-zinc-200 ring-zinc-200/10 sm:col-span-6 xl:col-span-3 dark:bg-zinc-800 dark:shadow-zinc-800"
>
<div
class="flex items-center text-sm font-medium text-rose-500"
>
<span>1.75%</span>
<svg
class="hi-mini hi-arrow-small-up inline-block size-5 rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 15a.75.75 0 01-.75-.75V7.612L7.29 9.77a.75.75 0 01-1.08-1.04l3.25-3.5a.75.75 0 011.08 0l3.25 3.5a.75.75 0 11-1.08 1.04l-1.96-2.158v6.638A.75.75 0 0110 15z"
clip-rule="evenodd"
/>
</svg>
</div>
<dl>
<dt class="text-xl font-extrabold">56,130</dt>
<dd
class="text-sm font-medium text-zinc-500 dark:text-zinc-400"
>
Unique visits
</dd>
</dl>
</div>
<div
class="rounded-2xl bg-white p-6 ring-1 shadow-sm shadow-zinc-200 ring-zinc-200/10 sm:col-span-6 xl:col-span-3 dark:bg-zinc-800 dark:shadow-zinc-800"
>
<div
class="flex items-center text-sm font-medium text-emerald-500"
>
<span>3.25%</span>
<svg
class="hi-mini hi-arrow-small-up inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 15a.75.75 0 01-.75-.75V7.612L7.29 9.77a.75.75 0 01-1.08-1.04l3.25-3.5a.75.75 0 011.08 0l3.25 3.5a.75.75 0 11-1.08 1.04l-1.96-2.158v6.638A.75.75 0 0110 15z"
clip-rule="evenodd"
/>
</svg>
</div>
<dl>
<dt class="text-xl font-extrabold">04:25</dt>
<dd
class="text-sm font-medium text-zinc-500 dark:text-zinc-400"
>
Average Visit
</dd>
</dl>
</div>
<div
class="rounded-2xl bg-white p-6 ring-1 shadow-sm shadow-zinc-200 ring-zinc-200/10 sm:col-span-6 xl:col-span-3 dark:bg-zinc-800 dark:shadow-zinc-800"
>
<div
class="flex items-center text-sm font-medium text-emerald-500"
>
<span>1%</span>
<svg
class="hi-mini hi-arrow-small-up inline-block size-5 rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 15a.75.75 0 01-.75-.75V7.612L7.29 9.77a.75.75 0 01-1.08-1.04l3.25-3.5a.75.75 0 011.08 0l3.25 3.5a.75.75 0 11-1.08 1.04l-1.96-2.158v6.638A.75.75 0 0110 15z"
clip-rule="evenodd"
/>
</svg>
</div>
<dl>
<dt class="text-xl font-extrabold">27%</dt>
<dd
class="text-sm font-medium text-zinc-500 dark:text-zinc-400"
>
Bounce Rate
</dd>
</dl>
</div>
<!-- END Quick Stats -->
<!-- Pageviews -->
<div
class="overflow-hidden rounded-2xl bg-white p-6 ring-1 shadow-sm shadow-zinc-200 ring-zinc-200/10 sm:col-span-12 dark:bg-zinc-800 dark:shadow-zinc-800"
>
<div class="mb-6 flex items-center justify-between gap-4">
<h2 class="text-xl font-extrabold">
Pageviews
<small
class="font-semibold text-zinc-500 dark:text-zinc-400"
>last month</small
>
</h2>
<button
type="button"
class="flex items-center justify-between gap-1.5 rounded-xl px-2 py-2 text-sm font-semibold text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 active:bg-zinc-200 active:text-zinc-800 dark:hover:bg-zinc-700 dark:hover:text-zinc-400 dark:active:bg-zinc-600 dark:active:text-zinc-300"
>
<svg
class="hi-mini hi-cog-6-tooth inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M7.84 1.804A1 1 0 018.82 1h2.36a1 1 0 01.98.804l.331 1.652a6.993 6.993 0 011.929 1.115l1.598-.54a1 1 0 011.186.447l1.18 2.044a1 1 0 01-.205 1.251l-1.267 1.113a7.047 7.047 0 010 2.228l1.267 1.113a1 1 0 01.206 1.25l-1.18 2.045a1 1 0 01-1.187.447l-1.598-.54a6.993 6.993 0 01-1.929 1.115l-.33 1.652a1 1 0 01-.98.804H8.82a1 1 0 01-.98-.804l-.331-1.652a6.993 6.993 0 01-1.929-1.115l-1.598.54a1 1 0 01-1.186-.447l-1.18-2.044a1 1 0 01.205-1.251l1.267-1.114a7.05 7.05 0 010-2.227L1.821 7.773a1 1 0 01-.206-1.25l1.18-2.045a1 1 0 011.187-.447l1.598.54A6.993 6.993 0 017.51 3.456l.33-1.652zM10 13a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
<!-- Example SVG Chart -->
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1040 500"
fill="currentColor"
class="inset-0 text-pink-500"
>
<path
d="M0 500h27.733v-95.903q0-13.867-13.866-13.867Q0 390.23 0 404.097Zm34.667 0H62.4V246.718q0-13.866-13.867-13.866-13.866 0-13.866 13.866Zm34.666 0h27.734V237.074q0-13.867-13.867-13.867t-13.867 13.867ZM104 500h27.733V352.961q0-13.866-13.866-13.866-13.867 0-13.867 13.866Zm34.667 0H166.4V79.274q0-13.866-13.867-13.866-13.866 0-13.866 13.866Zm34.666 0h27.734V282.476q0-13.867-13.867-13.867t-13.867 13.867ZM208 500h27.733V109.097q0-13.866-13.866-13.866Q208 95.23 208 109.097Zm34.667 0H270.4V354.964q0-13.867-13.867-13.867-13.866 0-13.866 13.867Zm34.666 0h27.734V237.43q0-13.866-13.867-13.866t-13.867 13.866ZM312 500h27.733V128.23q0-13.866-13.866-13.866-13.867 0-13.867 13.867Zm34.667 0H374.4V187.945q0-13.867-13.867-13.867-13.866 0-13.866 13.867Zm34.666 0h27.734V244.126q0-13.867-13.867-13.867t-13.867 13.867ZM416 500h27.733V342.717q0-13.867-13.866-13.867-13.867 0-13.867 13.867Zm34.667 0H478.4V196.372q0-13.867-13.867-13.867-13.866 0-13.866 13.867Zm34.666 0h27.734V284.25q0-13.867-13.867-13.867t-13.867 13.866ZM520 500h27.733V353.6q0-13.866-13.866-13.866-13.867 0-13.867 13.867Zm34.667 0H582.4V361q0-13.867-13.867-13.867-13.866 0-13.866 13.867Zm34.666 0h27.734V216.279q0-13.867-13.867-13.867t-13.867 13.867ZM624 500h27.733V84.066q0-13.866-13.866-13.866Q624 70.2 624 84.066Zm34.667 0H686.4V214.442q0-13.867-13.867-13.867-13.866 0-13.866 13.867Zm34.666 0h27.734V343.847q0-13.867-13.867-13.867t-13.867 13.867ZM728 500h27.733V350.54q0-13.867-13.866-13.867-13.867 0-13.867 13.866Zm34.667 0H790.4V312.185q0-13.866-13.867-13.866-13.866 0-13.866 13.866Zm34.666 0h27.734V146.963q0-13.867-13.867-13.867t-13.867 13.867ZM832 500h27.733V174.362q0-13.867-13.866-13.867-13.867 0-13.867 13.867Zm34.667 0H894.4V129.027q0-13.867-13.867-13.867-13.866 0-13.866 13.867Zm34.666 0h27.734V377.185q0-13.866-13.867-13.866t-13.867 13.866ZM936 500h27.733V120.084q0-13.867-13.866-13.867-13.867 0-13.867 13.867Zm34.667 0H998.4V105.171q0-13.866-13.867-13.866-13.866 0-13.866 13.866Zm34.666 0h27.734V68.482q0-13.867-13.867-13.867t-13.867 13.867Z"
/>
</svg>
<!-- END Example SVG Chart -->
</div>
<!-- END Pageviews -->
<!-- Popular Pages -->
<div
class="overflow-hidden rounded-2xl bg-white p-6 ring-1 shadow-sm shadow-zinc-200 ring-zinc-200/10 sm:col-span-6 dark:bg-zinc-800 dark:shadow-zinc-800"
>
<div class="mb-6 flex items-center justify-between gap-4">
<h2 class="text-xl font-extrabold">Popular Pages</h2>
<button
type="button"
class="flex items-center justify-between gap-1.5 rounded-xl px-2 py-2 text-sm font-semibold text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 active:bg-zinc-200 active:text-zinc-800 dark:hover:bg-zinc-700 dark:hover:text-zinc-400 dark:active:bg-zinc-600 dark:active:text-zinc-300"
>
<svg
class="hi-mini hi-cog-6-tooth inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M7.84 1.804A1 1 0 018.82 1h2.36a1 1 0 01.98.804l.331 1.652a6.993 6.993 0 011.929 1.115l1.598-.54a1 1 0 011.186.447l1.18 2.044a1 1 0 01-.205 1.251l-1.267 1.113a7.047 7.047 0 010 2.228l1.267 1.113a1 1 0 01.206 1.25l-1.18 2.045a1 1 0 01-1.187.447l-1.598-.54a6.993 6.993 0 01-1.929 1.115l-.33 1.652a1 1 0 01-.98.804H8.82a1 1 0 01-.98-.804l-.331-1.652a6.993 6.993 0 01-1.929-1.115l-1.598.54a1 1 0 01-1.186-.447l-1.18-2.044a1 1 0 01.205-1.251l1.267-1.114a7.05 7.05 0 010-2.227L1.821 7.773a1 1 0 01-.206-1.25l1.18-2.045a1 1 0 011.187-.447l1.598.54A6.993 6.993 0 017.51 3.456l.33-1.652zM10 13a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
<table class="w-full text-sm">
<thead>
<tr>
<th
class="py-2 pe-2 text-start font-medium text-zinc-500 dark:text-zinc-400"
>
Path
</th>
<th
class="py-2 ps-2 text-end font-medium text-zinc-500 dark:text-zinc-400"
>
Pageviews
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 42%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>/blog/how-to-build-a-laravel-app</a
>
</td>
<td class="text-end">6849</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 30%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>/</a
>
</td>
<td class="text-end">4216</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 28%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>/blog/working-from-home-has-never-been-easier</a
>
</td>
<td class="text-end">3895</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 25%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>/products/dark-tailwind-dashboard</a
>
</td>
<td class="text-end">2863</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 22%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>/freebies/landing-page</a
>
</td>
<td class="text-end">2552</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 12%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>/blog/bootstrap-5-new-features</a
>
</td>
<td class="text-end">1236</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 10%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>/about</a
>
</td>
<td class="text-end">1054</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 8%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>/blog/inspiring-results-marketing</a
>
</td>
<td class="text-end">869</td>
</tr>
</tbody>
</table>
</div>
<!-- END Popular Pages -->
<!-- Referrers -->
<div
class="overflow-hidden rounded-2xl bg-white p-6 ring-1 shadow-sm shadow-zinc-200 ring-zinc-200/10 sm:col-span-6 dark:bg-zinc-800 dark:shadow-zinc-800"
>
<div class="mb-6 flex items-center justify-between gap-4">
<h2 class="text-xl font-extrabold">Referrers</h2>
<button
type="button"
class="flex items-center justify-between gap-1.5 rounded-xl px-2 py-2 text-sm font-semibold text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 active:bg-zinc-200 active:text-zinc-800 dark:hover:bg-zinc-700 dark:hover:text-zinc-400 dark:active:bg-zinc-600 dark:active:text-zinc-300"
>
<svg
class="hi-mini hi-cog-6-tooth inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M7.84 1.804A1 1 0 018.82 1h2.36a1 1 0 01.98.804l.331 1.652a6.993 6.993 0 011.929 1.115l1.598-.54a1 1 0 011.186.447l1.18 2.044a1 1 0 01-.205 1.251l-1.267 1.113a7.047 7.047 0 010 2.228l1.267 1.113a1 1 0 01.206 1.25l-1.18 2.045a1 1 0 01-1.187.447l-1.598-.54a6.993 6.993 0 01-1.929 1.115l-.33 1.652a1 1 0 01-.98.804H8.82a1 1 0 01-.98-.804l-.331-1.652a6.993 6.993 0 01-1.929-1.115l-1.598.54a1 1 0 01-1.186-.447l-1.18-2.044a1 1 0 01.205-1.251l1.267-1.114a7.05 7.05 0 010-2.227L1.821 7.773a1 1 0 01-.206-1.25l1.18-2.045a1 1 0 011.187-.447l1.598.54A6.993 6.993 0 017.51 3.456l.33-1.652zM10 13a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
<table class="w-full text-sm">
<thead>
<tr>
<th
class="py-2 pe-2 text-start font-medium text-zinc-500 dark:text-zinc-400"
>
Referrers
</th>
<th
class="py-2 ps-2 text-end font-medium text-zinc-500 dark:text-zinc-400"
>
Pageviews
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 76%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>Google</a
>
</td>
<td class="text-end">25630</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 14%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>Bing</a
>
</td>
<td class="text-end">3260</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 13%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>Facebook</a
>
</td>
<td class="text-end">3158</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 12%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>X (Twitter)</a
>
</td>
<td class="text-end">2800</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 8%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>DuckDuckGo</a
>
</td>
<td class="text-end">2769</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 8%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>Yahoo</a
>
</td>
<td class="text-end">2200</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 6%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>example.com</a
>
</td>
<td class="text-end">856</td>
</tr>
<tr>
<td class="relative p-2">
<div
class="absolute start-0 top-0 bottom-0 my-px w-3/4 bg-zinc-100 dark:bg-zinc-700"
style="width: 6%"
></div>
<a
class="relative font-medium hover:underline"
href="javascript:void(0)"
>example.io</a
>
</td>
<td class="text-end">736</td>
</tr>
</tbody>
</table>
</div>
<!-- END Referrers -->
</div>
</div>
</main>
<!-- END Page Content -->
<!-- Page Footer -->
<footer id="page-footer" class="flex flex-none items-center">
<div class="container mx-auto px-4 lg:px-8 xl:max-w-6xl">
<div
class="flex flex-col gap-2 pt-4 pb-8 text-center text-sm font-medium text-zinc-600 md:flex-row md:justify-between md:text-start dark:text-zinc-400"
>
<div>© <span class="font-semibold">tailstats</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-pink-600 transition hover:text-pink-700 dark:text-pink-400 dark:hover:text-pink-300"
href="https://pixelcave.com"
target="_blank"
>pixelcave</a
></span
>
</div>
</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.