<div
class="relative mx-auto grid w-full max-w-2xl grid-cols-1 gap-4 rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs sm:grid-cols-2"
>
<a
href="javascript:void(0)"
class="group rounded-2xl bg-white p-6 ring-1 shadow-zinc-200 ring-zinc-200/50 hover:ring-indigo-200 active:ring-zinc-200/50"
>
<div class="flex items-center justify-between">
<div>
<div
class="mb-2 flex items-center text-sm font-medium text-emerald-500"
>
<span>12%</span>
<svg
class="hi-mini hi-arrow-small-up inline-block size-5 rotate-45"
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">$247,890</dt>
<dd class="mt-0.5 text-sm font-medium text-zinc-500">
Monthly Revenue
</dd>
</dl>
</div>
<div
class="flex size-12 items-center justify-center rounded-xl bg-zinc-100 text-zinc-600 group-hover:bg-indigo-100 group-hover:text-indigo-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-wallet inline-block size-6"
>
<path
d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"
/>
<path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" />
</svg>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group rounded-2xl bg-white p-6 ring-1 shadow-zinc-200 ring-zinc-200/50 hover:ring-indigo-200 active:ring-zinc-200/50"
>
<div class="flex items-center justify-between">
<div>
<div class="mb-2 flex items-center text-sm font-medium text-rose-500">
<span>2.5%</span>
<svg
class="hi-mini hi-arrow-small-up inline-block size-5 rotate-135"
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">1,432</dt>
<dd class="mt-0.5 text-sm font-medium text-zinc-500">
New Customers
</dd>
</dl>
</div>
<div
class="flex size-12 items-center justify-center rounded-xl bg-zinc-100 text-zinc-600 group-hover:bg-indigo-100 group-hover:text-indigo-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-users inline-block size-6"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group rounded-2xl bg-white p-6 ring-1 shadow-zinc-200 ring-zinc-200/50 hover:ring-indigo-200 active:ring-zinc-200/50"
>
<div class="flex items-center justify-between">
<div>
<div
class="mb-2 flex items-center text-sm font-medium text-emerald-500"
>
<span>8.7%</span>
<svg
class="hi-mini hi-arrow-small-up inline-block size-5 rotate-45"
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">$85.20</dt>
<dd class="mt-0.5 text-sm font-medium text-zinc-500">
Avg. Order Value
</dd>
</dl>
</div>
<div
class="flex size-12 items-center justify-center rounded-xl bg-zinc-100 text-zinc-600 group-hover:bg-indigo-100 group-hover:text-indigo-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-shopping-bag inline-block size-6"
>
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" />
<path d="M3 6h18" />
<path d="M16 10a4 4 0 0 1-8 0" />
</svg>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group rounded-2xl bg-white p-6 ring-1 shadow-zinc-200 ring-zinc-200/50 hover:ring-indigo-200 active:ring-zinc-200/50"
>
<div class="flex items-center justify-between">
<div>
<div
class="mb-2 flex items-center text-sm font-medium text-emerald-500"
>
<span>3.2%</span>
<svg
class="hi-mini hi-arrow-small-up inline-block size-5 rotate-45"
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">42%</dt>
<dd class="mt-0.5 text-sm font-medium text-zinc-500">
Conversion Rate
</dd>
</dl>
</div>
<div
class="flex size-12 items-center justify-center rounded-xl bg-zinc-100 text-zinc-600 group-hover:bg-indigo-100 group-hover:text-indigo-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-chart-no-axes-combined inline-block size-6"
>
<path d="M12 16v5" />
<path d="M16 14v7" />
<path d="M20 10v11" />
<path
d="m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.707 0L2 15"
/>
<path d="M4 18v3" />
<path d="M8 14v7" />
</svg>
</div>
</div>
</a>
</div>