<div
x-data="{ darkMode: false, domainDropdownOpen: false }"
x-bind:class="{ 'dark': darkMode }"
>
<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"
>
<header
id="page-header"
class="fixed end-0 start-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-sm dark:bg-zinc-800/80 sm:rounded-2xl sm:px-6"
>
<div class="flex items-center">
<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 h-5 w-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>
</div>
<div class="flex items-center gap-2">
<div class="relative inline-block">
<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-950/50 dark:text-zinc-100 dark:hover:bg-zinc-950/50"
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 h-5 w-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>
<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 h-5 w-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 h-5 w-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 h-5 w-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 h-5 w-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 h-5 w-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>
</div>
</div>
</div>
</div>
</header>
<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"
>
<h1 class="text-lg font-bold">Dashboard</h1>
<div class="flex items-center justify-center gap-1">
<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 h-5 w-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 h-5 w-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>
<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 h-5 w-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 h-5 w-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>
<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 h-5 w-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>
</div>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-12 lg:gap-8">
<div
class="rounded-2xl bg-white p-6 shadow shadow-zinc-200 ring-1 ring-zinc-200/10 dark:bg-zinc-800 dark:shadow-zinc-800 sm:col-span-6 xl:col-span-3"
>
<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 h-5 w-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 shadow shadow-zinc-200 ring-1 ring-zinc-200/10 dark:bg-zinc-800 dark:shadow-zinc-800 sm:col-span-6 xl:col-span-3"
>
<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 h-5 w-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 shadow shadow-zinc-200 ring-1 ring-zinc-200/10 dark:bg-zinc-800 dark:shadow-zinc-800 sm:col-span-6 xl:col-span-3"
>
<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 h-5 w-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 shadow shadow-zinc-200 ring-1 ring-zinc-200/10 dark:bg-zinc-800 dark:shadow-zinc-800 sm:col-span-6 xl:col-span-3"
>
<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 h-5 w-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>
<div
class="overflow-hidden rounded-2xl bg-white p-6 shadow shadow-zinc-200 ring-1 ring-zinc-200/10 dark:bg-zinc-800 dark:shadow-zinc-800 sm:col-span-12"
>
<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 h-5 w-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>
<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>
</div>
<div
class="overflow-hidden rounded-2xl bg-white p-6 shadow shadow-zinc-200 ring-1 ring-zinc-200/10 dark:bg-zinc-800 dark:shadow-zinc-800 sm:col-span-6"
>
<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 h-5 w-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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>
<div
class="overflow-hidden rounded-2xl bg-white p-6 shadow shadow-zinc-200 ring-1 ring-zinc-200/10 dark:bg-zinc-800 dark:shadow-zinc-800 sm:col-span-6"
>
<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 h-5 w-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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 bottom-0 start-0 top-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>
</div>
</div>
</main>
<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 pb-8 pt-4 text-center text-sm font-medium text-zinc-600 dark:text-zinc-400 md:flex-row md:justify-between md:text-start"
>
<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 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-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>
</div>
</div>