<div
class="relative grid w-full grid-cols-1 gap-3 rounded-3xl bg-white/40 p-3 shadow-sm shadow-slate-300 backdrop-blur-xs sm:mx-auto sm:max-w-5xl sm:grid-cols-2 sm:gap-6 sm:p-6 lg:grid-cols-3"
>
<a
href="javascript:void(0)"
class="overflow-hidden rounded-2xl bg-white ring-1 shadow-sm shadow-slate-300 ring-slate-200/10 transition hover:opacity-70 active:opacity-100"
>
<div class="flex items-center justify-between gap-3 p-5">
<div class="grow">
<div
class="flex items-center gap-0.5 text-sm font-medium text-emerald-500"
>
<span>3%</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
data-slot="icon"
class="hi-micro hi-arrow-up inline-block size-4 rotate-45"
>
<path
fill-rule="evenodd"
d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
clip-rule="evenodd"
/>
</svg>
</div>
<dl>
<dt class="text-2xl font-extrabold">2.7k</dt>
<dd class="text-xs font-medium text-slate-500">Conversion Rate</dd>
</dl>
</div>
<div class="relative w-full max-w-28">
<div
class="absolute inset-0 bg-linear-to-t from-white via-transparent to-transparent"
></div>
<svg
xmlns="http://www.w3.org/2000/svg"
height="auto"
viewBox="0 0 2000 1000"
>
<path
fill="#444cf71a"
d="M0 623.854c80-59.416 240-298.176 400-297.076 160 1.1 240 343.78 400 302.574 160-41.206 240-415.29 400-508.605 160-93.314 240-22.06 400 42.033 160 64.095 320 222.751 400 278.439V1000H0Z"
/>
<path
fill="none"
stroke="#444cf7"
stroke-width="30"
d="M0 623.854c80-59.416 240-298.176 400-297.076 160 1.1 240 343.78 400 302.574 160-41.206 240-415.29 400-508.605 160-93.314 240-22.06 400 42.033 160 64.095 320 222.751 400 278.439"
/>
</svg>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="overflow-hidden rounded-2xl bg-white ring-1 shadow-sm shadow-slate-300 ring-slate-200/10 transition hover:opacity-70 active:opacity-100"
>
<div class="flex items-center justify-between gap-3 p-5">
<div class="grow">
<div
class="flex items-center gap-0.5 text-sm font-medium text-emerald-500"
>
<span>15%</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
data-slot="icon"
class="hi-micro hi-arrow-up inline-block size-4 rotate-45"
>
<path
fill-rule="evenodd"
d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
clip-rule="evenodd"
/>
</svg>
</div>
<dl>
<dt class="text-2xl font-extrabold">4.7k</dt>
<dd class="text-xs font-medium text-slate-500">Visitors</dd>
</dl>
</div>
<div class="relative w-full max-w-28">
<div
class="absolute inset-0 bg-linear-to-t from-white via-transparent to-transparent"
></div>
<svg
xmlns="http://www.w3.org/2000/svg"
height="auto"
viewBox="0 0 2000 1000"
>
<path
fill="#444cf71a"
d="M0 602.49c80-41.832 240-108.916 400-209.159C560 293.09 640 21.354 800 101.278c160 79.923 240 652.286 400 691.67 160 39.384 240-473.81 400-494.752 160-20.943 320 312.03 400 390.038V1000H0Z"
/>
<path
fill="none"
stroke="#444cf7"
stroke-width="30"
d="M0 602.49c80-41.832 240-108.916 400-209.159C560 293.09 640 21.354 800 101.278c160 79.923 240 652.286 400 691.67 160 39.384 240-473.81 400-494.752 160-20.943 320 312.03 400 390.038"
/>
</svg>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="overflow-hidden rounded-2xl bg-white ring-1 shadow-sm shadow-slate-300 ring-slate-200/10 transition hover:opacity-70 active:opacity-100"
>
<div class="flex items-center justify-between gap-3 p-5">
<div class="grow">
<div
class="flex items-center gap-0.5 text-sm font-medium text-emerald-500"
>
<span>9%</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
data-slot="icon"
class="hi-micro hi-arrow-up inline-block size-4 rotate-45"
>
<path
fill-rule="evenodd"
d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
clip-rule="evenodd"
/>
</svg>
</div>
<dl>
<dt class="text-2xl font-extrabold">3.6k</dt>
<dd class="text-xs font-medium text-slate-500">Unique Visitors</dd>
</dl>
</div>
<div class="relative w-full max-w-28">
<div
class="absolute inset-0 bg-linear-to-t from-white via-transparent to-transparent"
></div>
<svg
xmlns="http://www.w3.org/2000/svg"
height="auto"
viewBox="0 0 2000 1000"
>
<path
fill="#444cf71a"
d="M0 449.109c80 24.34 240 157.918 400 121.701 160-36.216 240-233.648 400-302.785 160-69.137 240-128.846 400-42.9s240 420.493 400 472.63 320-169.555 400-211.943V1000H0Z"
/>
<path
fill="none"
stroke="#444cf7"
stroke-width="30"
d="M0 449.109c80 24.34 240 157.918 400 121.701 160-36.216 240-233.648 400-302.785 160-69.137 240-128.846 400-42.9s240 420.493 400 472.63 320-169.555 400-211.943"
/>
</svg>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="overflow-hidden rounded-2xl bg-white ring-1 shadow-sm shadow-slate-300 ring-slate-200/10 transition hover:opacity-70 active:opacity-100"
>
<div class="flex items-center justify-between gap-3 p-5">
<div class="grow">
<div
class="flex items-center gap-0.5 text-sm font-medium text-emerald-500"
>
<span>8%</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
data-slot="icon"
class="hi-micro hi-arrow-up inline-block size-4 rotate-45"
>
<path
fill-rule="evenodd"
d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
clip-rule="evenodd"
/>
</svg>
</div>
<dl>
<dt class="text-2xl font-extrabold">2.6k</dt>
<dd class="text-xs font-medium text-slate-500">Sessions</dd>
</dl>
</div>
<div class="relative w-full max-w-28">
<div
class="absolute inset-0 bg-linear-to-t from-white via-transparent to-transparent"
></div>
<svg
xmlns="http://www.w3.org/2000/svg"
height="auto"
viewBox="0 0 2000 1000"
>
<path
fill="#444cf71a"
d="M0 736.31c80 9.994 240 136.225 400 49.971 160-86.254 240-448.72 400-481.24 160-32.52 240 312.003 400 318.64 160 6.637 240-309.293 400-285.454 160 23.84 320 323.722 400 404.652V1000H0Z"
/>
<path
fill="none"
stroke="#444cf7"
stroke-width="30"
d="M0 736.31c80 9.994 240 136.225 400 49.971 160-86.254 240-448.72 400-481.24 160-32.52 240 312.003 400 318.64 160 6.637 240-309.293 400-285.454 160 23.84 320 323.722 400 404.652"
/>
</svg>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="overflow-hidden rounded-2xl bg-white ring-1 shadow-sm shadow-slate-300 ring-slate-200/10 transition hover:opacity-70 active:opacity-100"
>
<div class="flex items-center justify-between gap-3 p-5">
<div class="grow">
<div
class="flex items-center gap-0.5 text-sm font-medium text-emerald-500"
>
<span>12%</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
data-slot="icon"
class="hi-micro hi-arrow-up inline-block size-4 rotate-45"
>
<path
fill-rule="evenodd"
d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
clip-rule="evenodd"
/>
</svg>
</div>
<dl>
<dt class="text-2xl font-extrabold">5m 3s</dt>
<dd class="text-xs font-medium text-slate-500">Session Duration</dd>
</dl>
</div>
<div class="relative w-full max-w-28">
<div
class="absolute inset-0 bg-linear-to-t from-white via-transparent to-transparent"
></div>
<svg
xmlns="http://www.w3.org/2000/svg"
height="auto"
viewBox="0 0 2000 1000"
>
<path
fill="#444cf71a"
d="M0 131.28c80 52.463 240 237.611 400 262.315 160 24.703 240-137.143 400-138.8 160-1.656 240 25.982 400 130.517s240 438.49 400 392.16c160-46.33 320-499.048 400-623.81V1000H0Z"
/>
<path
fill="none"
stroke="#444cf7"
stroke-width="30"
d="M0 131.28c80 52.463 240 237.611 400 262.315 160 24.703 240-137.143 400-138.8 160-1.656 240 25.982 400 130.517s240 438.49 400 392.16c160-46.33 320-499.048 400-623.81"
/>
</svg>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="overflow-hidden rounded-2xl bg-white ring-1 shadow-sm shadow-slate-300 ring-slate-200/10 transition hover:opacity-70 active:opacity-100"
>
<div class="flex items-center justify-between gap-3 p-5">
<div class="grow">
<div
class="flex items-center gap-0.5 text-sm font-medium text-rose-500"
>
<span>2.7k</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
data-slot="icon"
class="hi-micro hi-arrow-down inline-block size-4 -rotate-45"
>
<path
fill-rule="evenodd"
d="M8 2a.75.75 0 0 1 .75.75v8.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.22 3.22V2.75A.75.75 0 0 1 8 2Z"
clip-rule="evenodd"
/>
</svg>
</div>
<dl>
<dt class="text-2xl font-extrabold">15,6k</dt>
<dd class="text-xs font-medium text-slate-500">Page Views</dd>
</dl>
</div>
<div class="relative w-full max-w-28">
<div
class="absolute inset-0 bg-linear-to-t from-white via-transparent to-transparent"
></div>
<svg
height="auto"
viewBox="0 0 2000 1000"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 376.848c80 19.983 240 96.286 400 99.915 160 3.63 240-132.422 400-81.768 160 50.655 240 296.222 400 335.04 160 38.82 240-142.179 400-140.944 160 1.235 320 117.695 400 147.119V1000H0Z"
fill="#444cf71a"
/>
<path
d="M0 376.848c80 19.983 240 96.286 400 99.915 160 3.63 240-132.422 400-81.768 160 50.655 240 296.222 400 335.04 160 38.82 240-142.179 400-140.944 160 1.235 320 117.695 400 147.119"
fill="none"
stroke="#444cf7"
stroke-width="30"
/>
</svg>
</div>
</div>
</a>
</div>