Quick Statistics Card

<!--
  Day 14: Quick statistics card

  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
-->

<!-- Quick Statistics -->
<div
  class="relative mx-auto grid w-full max-w-5xl grid-cols-1 gap-4 rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs sm:grid-cols-2 md:grid-cols-4"
>
  <div
    class="rounded-2xl bg-white p-6 ring-1 shadow-sm shadow-zinc-200 ring-zinc-200/10"
  >
    <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">Pageviews</dd>
    </dl>
  </div>
  <div
    class="rounded-2xl bg-white p-6 ring-1 shadow-sm shadow-zinc-200 ring-zinc-200/10"
  >
    <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">Unique visits</dd>
    </dl>
  </div>
  <div
    class="rounded-2xl bg-white p-6 ring-1 shadow-sm shadow-zinc-200 ring-zinc-200/10"
  >
    <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">Average Visit</dd>
    </dl>
  </div>
  <div
    class="rounded-2xl bg-white p-6 ring-1 shadow-sm shadow-zinc-200 ring-zinc-200/10"
  >
    <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">Bounce Rate</dd>
    </dl>
  </div>
</div>
<!-- END Quick Statistics -->