<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-4"
>
<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 justify-between gap-2 p-5">
<dl>
<dt class="text-xl font-extrabold">26,125</dt>
<dd class="text-sm font-medium text-slate-500">Pageviews</dd>
</dl>
<div
class="flex items-center justify-end text-sm font-medium text-emerald-500"
>
<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>
<span>12%</span>
</div>
</div>
<svg
class="inline-block w-full"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2000 667"
>
<path
fill="#10b9811a"
d="M0 314.524c44.4-5.412 133.2-5.263 222-27.057 88.8-21.794 133.2-93.635 222-81.915 88.8 11.721 133.2 130.475 222 140.519 88.8 10.043 133.2-111.625 222-90.3 88.8 21.324 133.2 178.794 222 196.922 88.8 18.128 133.2-91.837 222-106.282 88.8-14.445 133.2 75.864 222 34.057 88.8-41.808 133.2-234.65 222-243.095 88.8-8.444 177.6 160.698 222 200.873L2000 667H0Z"
/>
<path
fill="none"
stroke="#10b981"
stroke-width="4"
d="M0 314.524c44.4-5.412 133.2-5.263 222-27.057 88.8-21.794 133.2-93.635 222-81.915 88.8 11.721 133.2 130.475 222 140.519 88.8 10.043 133.2-111.625 222-90.3 88.8 21.324 133.2 178.794 222 196.922 88.8 18.128 133.2-91.837 222-106.282 88.8-14.445 133.2 75.864 222 34.057 88.8-41.808 133.2-234.65 222-243.095 88.8-8.444 177.6 160.698 222 200.873"
/>
</svg>
</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 justify-between gap-2 p-5">
<dl>
<dt class="text-xl font-extrabold">17,582</dt>
<dd class="text-sm font-medium text-slate-500">Unique visits</dd>
</dl>
<div
class="flex items-center justify-end text-sm font-medium text-rose-500"
>
<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>
<span>3%</span>
</div>
</div>
<svg
class="inline-block w-full"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2000 667"
>
<path
fill="#f43f5e1a"
d="M0 342.778C44.4 292.257 133.2 77.972 222 90.171c88.8 12.198 133.2 312.765 222 313.6 88.8.834 133.2-257.578 222-309.426 88.8-51.848 133.2-9.843 222 50.185 88.8 60.029 133.2 260.636 222 249.958 88.8-10.679 133.2-273.75 222-303.35 88.8-29.598 133.2 130.538 222 155.354 88.8 24.817 133.2-51.391 222-31.271 88.8 20.12 177.6 105.496 222 131.87L2000 667H0Z"
/>
<path
fill="none"
stroke="#f43f5e"
stroke-width="4"
d="M0 342.778C44.4 292.257 133.2 77.972 222 90.171c88.8 12.198 133.2 312.765 222 313.6 88.8.834 133.2-257.578 222-309.426 88.8-51.848 133.2-9.843 222 50.185 88.8 60.029 133.2 260.636 222 249.958 88.8-10.679 133.2-273.75 222-303.35 88.8-29.598 133.2 130.538 222 155.354 88.8 24.817 133.2-51.391 222-31.271 88.8 20.12 177.6 105.496 222 131.87"
/>
</svg>
</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 justify-between gap-2 p-5">
<dl>
<dt class="text-xl font-extrabold">05:40</dt>
<dd class="text-sm font-medium text-slate-500">Average Visit</dd>
</dl>
<div
class="flex items-center justify-end text-sm font-medium text-emerald-500"
>
<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>
<span>7%</span>
</div>
</div>
<svg
class="inline-block w-full"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2000 667"
>
<path
fill="#10b9811a"
d="M0 171.723c44.4 13.344 133.2 24.124 222 66.72 88.8 42.595 133.2 135.748 222 146.256 88.8 10.51 133.2-99.225 222-93.713 88.8 5.512 133.2 97.818 222 121.272 88.8 23.454 133.2 39.44 222-4.001 88.8-43.441 133.2-201.234 222-213.205 88.8-11.97 133.2 91.285 222 153.352 88.8 62.066 133.2 132.152 222 156.98 88.8 24.83 177.6-26.267 222-32.834l2 194.45H0Z"
/>
<path
fill="none"
stroke="#10b981"
stroke-width="4"
d="M0 171.723c44.4 13.344 133.2 24.124 222 66.72 88.8 42.595 133.2 135.748 222 146.256 88.8 10.51 133.2-99.225 222-93.713 88.8 5.512 133.2 97.818 222 121.272 88.8 23.454 133.2 39.44 222-4.001 88.8-43.441 133.2-201.234 222-213.205 88.8-11.97 133.2 91.285 222 153.352 88.8 62.066 133.2 132.152 222 156.98 88.8 24.83 177.6-26.267 222-32.834"
/>
</svg>
</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 justify-between gap-2 p-5">
<dl>
<dt class="text-xl font-extrabold">22%</dt>
<dd class="text-sm font-medium text-slate-500">Bounce Rate</dd>
</dl>
<div
class="flex items-center justify-end text-sm font-medium text-emerald-500"
>
<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>
<span>3%</span>
</div>
</div>
<svg
class="inline-block w-full"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2000 667"
>
<path
fill="#10b9811a"
d="M0 341.44c44.4-7.145 133.2-65.47 222-35.722 88.8 29.748 133.2 149.164 222 184.463 88.8 35.299 133.2 44.665 222-7.969 88.8-52.634 133.2-255.498 222-255.202 88.8.296 133.2 256.572 222 256.683 88.8.11 133.2-189.316 222-256.132 88.8-66.816 133.2-63.08 222-77.948 88.8-14.869 133.2 5.734 222 3.605 88.8-2.13 177.6-11.4 222-14.251L2000 667H0Z"
/>
<path
fill="none"
stroke="#10b981"
stroke-width="4"
d="M0 341.44c44.4-7.145 133.2-65.47 222-35.722 88.8 29.748 133.2 149.164 222 184.463 88.8 35.299 133.2 44.665 222-7.969 88.8-52.634 133.2-255.498 222-255.202 88.8.296 133.2 256.572 222 256.683 88.8.11 133.2-189.316 222-256.132 88.8-66.816 133.2-63.08 222-77.948 88.8-14.869 133.2 5.734 222 3.605 88.8-2.13 177.6-11.4 222-14.251"
/>
</svg>
</a>
</div>