Boxes with Statistics

<!--
  Day 35: Boxes with Statistics

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

<!-- Boxes with Statistics -->
<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:gap-6 sm:p-6 lg:grid-cols-3"
>
  <div
    class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 shadow-slate-300 ring-slate-200/10 transition"
  >
    <div class="flex justify-between gap-2 p-5 lg:p-8">
      <dl>
        <dt class="text-xl font-extrabold">$128,450</dt>
        <dd class="text-sm font-medium text-slate-500">Monthly Revenue</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>15%</span>
      </div>
    </div>
    <div class="relative px-5 pb-5">
      <div
        class="absolute inset-x-0 bottom-5 h-10 bg-linear-to-t from-white to-transparent"
      ></div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 2000 1000"
        class="w-full"
      >
        <path
          fill="#62748e1a"
          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="#62748e"
          stroke-width="10"
          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>
  <div
    class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 shadow-slate-300 ring-slate-200/10 transition"
  >
    <div class="flex justify-between gap-2 p-5 lg:p-8">
      <dl>
        <dt class="text-xl font-extrabold">87</dt>
        <dd class="text-sm font-medium text-slate-500">New Leads</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>9%</span>
      </div>
    </div>
    <div class="relative px-5 pb-5">
      <div
        class="absolute inset-x-0 bottom-5 h-10 bg-linear-to-t from-white to-transparent"
      ></div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 2000 1000"
        class="w-full"
      >
        <path
          fill="#62748e1a"
          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="#62748e"
          stroke-width="10"
          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>
  <div
    class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 shadow-slate-300 ring-slate-200/10 transition"
  >
    <div class="flex justify-between gap-2 p-5 lg:p-8">
      <dl>
        <dt class="text-xl font-extrabold">68%</dt>
        <dd class="text-sm font-medium text-slate-500">Conversion Rate</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>5%</span>
      </div>
    </div>
    <div class="relative px-5 pb-5">
      <div
        class="absolute inset-x-0 bottom-5 h-10 bg-linear-to-t from-white to-transparent"
      ></div>
      <svg
        viewBox="0 0 2000 1000"
        xmlns="http://www.w3.org/2000/svg"
        class="w-full"
      >
        <path
          fill="#62748e1a"
          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"
        />
        <path
          fill="none"
          stroke="#62748e"
          stroke-width="10"
          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"
        />
      </svg>
    </div>
  </div>
</div>
<!-- END Boxes with Statistics -->