Liquid Glass Card

<!--
  Day 78: Liquid Glass 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
-->

<!-- Liquid Glass Card -->
<!-- Add a 'shadow-lg' class to the div if using on top of an image background -->
<div
  class="relative mx-auto w-full max-w-lg rounded-3xl bg-white/40 p-px ring-4 ring-zinc-200/50 backdrop-blur-lg"
>
  <!-- Border Details -->
  <div
    class="absolute inset-0 rounded-3xl border border-white mask-linear-135 mask-linear-from-0% mask-linear-to-20%"
  ></div>
  <div
    class="absolute inset-0 rounded-3xl border border-white -mask-linear-45 mask-linear-from-10% mask-linear-to-20%"
  ></div>
  <div
    class="absolute inset-0 rounded-3xl border border-white/90 mask-linear-40 mask-linear-from-0% mask-linear-to-10%"
  ></div>
  <div
    class="absolute inset-0 rounded-3xl border border-white/90 -mask-linear-110 mask-linear-from-0% mask-linear-to-5%"
  ></div>
  <!-- END Border Details -->

  <!-- Header -->
  <div class="relative rounded-3xl bg-white/20">
    <div class="px-6 pt-6 sm:px-8 sm:pt-8">
      <div class="flex items-center gap-3">
        <div
          class="flex size-12 items-center justify-center rounded-2xl bg-gradient-to-br from-teal-600 to-sky-600 ring-2 ring-white/50"
        >
          <svg
            class="size-6 text-white"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
            ></path>
          </svg>
        </div>
        <div>
          <h2 class="text-xl font-extrabold text-zinc-800">Analytics</h2>
          <p class="text-sm text-zinc-700">Last 30 days performance</p>
        </div>
      </div>
    </div>
    <!-- END Header -->

    <!-- Statistics Grid -->
    <div class="grid grid-cols-1 gap-4 p-6 sm:grid-cols-2 sm:p-8">
      <!-- Total Users -->
      <div
        class="relative rounded-2xl bg-white/30 p-6 shadow-lg shadow-zinc-500/5"
      >
        <div
          class="absolute inset-0 rounded-2xl border border-white mask-linear-135 mask-linear-from-0% mask-linear-to-20%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 -mask-linear-45 mask-linear-from-10% mask-linear-to-20%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 mask-linear-40 mask-linear-from-0% mask-linear-to-30%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 -mask-linear-110 mask-linear-from-0% mask-linear-to-15%"
        ></div>
        <div class="relative">
          <p class="text-sm text-zinc-700">Total Users</p>
          <p class="text-2xl font-bold text-zinc-800">24.8K</p>
          <div class="mt-1 flex items-center gap-2">
            <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-trending-up inline-block size-6 text-emerald-500"
            >
              <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
              <polyline points="16 7 22 7 22 13" />
            </svg>
            <span class="text-sm font-medium text-emerald-600">+12.5%</span>
          </div>
        </div>
      </div>
      <!-- END Total Users -->

      <!-- Revenue -->
      <div
        class="relative rounded-2xl bg-white/30 p-6 shadow-lg shadow-zinc-500/5"
      >
        <div
          class="absolute inset-0 rounded-2xl border border-white mask-linear-135 mask-linear-from-0% mask-linear-to-20%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 -mask-linear-45 mask-linear-from-10% mask-linear-to-20%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 mask-linear-40 mask-linear-from-0% mask-linear-to-30%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 -mask-linear-110 mask-linear-from-0% mask-linear-to-15%"
        ></div>
        <div class="relative">
          <p class="text-sm text-zinc-700">Revenue</p>
          <p class="text-2xl font-bold text-zinc-800">$89.2K</p>
          <div class="mt-1 flex items-center gap-2">
            <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-trending-up inline-block size-6 text-emerald-500"
            >
              <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
              <polyline points="16 7 22 7 22 13" />
            </svg>
            <span class="text-sm font-medium text-emerald-600">+8.1%</span>
          </div>
        </div>
      </div>
      <!-- END Revenue -->

      <!-- Conversion Rate -->
      <div
        class="relative rounded-2xl bg-white/30 p-6 shadow-lg shadow-zinc-500/5"
      >
        <div
          class="absolute inset-0 rounded-2xl border border-white mask-linear-135 mask-linear-from-0% mask-linear-to-20%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 -mask-linear-45 mask-linear-from-10% mask-linear-to-20%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 mask-linear-40 mask-linear-from-0% mask-linear-to-30%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 -mask-linear-110 mask-linear-from-0% mask-linear-to-15%"
        ></div>
        <div class="relative">
          <p class="text-sm text-zinc-700">Conversion</p>
          <p class="text-2xl font-bold text-zinc-800">3.2%</p>
          <div class="mt-1 flex items-center gap-2">
            <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-trending-down inline-block size-6 text-rose-500"
            >
              <polyline points="22 17 13.5 8.5 8.5 13.5 2 7" />
              <polyline points="16 17 22 17 22 11" />
            </svg>
            <span class="text-sm font-medium text-rose-600">-2.4%</span>
          </div>
        </div>
      </div>
      <!-- END Conversion Rate -->

      <!-- Active Sessions -->
      <div
        class="relative rounded-2xl bg-white/30 p-6 shadow-lg shadow-zinc-500/5"
      >
        <div
          class="absolute inset-0 rounded-2xl border border-white mask-linear-135 mask-linear-from-0% mask-linear-to-20%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 -mask-linear-45 mask-linear-from-10% mask-linear-to-20%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 mask-linear-40 mask-linear-from-0% mask-linear-to-30%"
        ></div>
        <div
          class="absolute inset-0 rounded-2xl border border-white/75 -mask-linear-110 mask-linear-from-0% mask-linear-to-15%"
        ></div>
        <div class="relative">
          <p class="text-sm text-zinc-700">Active Now</p>
          <p class="text-2xl font-bold text-zinc-800">1,247</p>
          <div class="mt-1 flex items-center gap-2">
            <div class="size-2 rounded-full bg-emerald-500"></div>
            <span class="text-sm font-medium text-emerald-600">Live</span>
          </div>
        </div>
      </div>
      <!-- END Active Sessions -->
    </div>
  </div>
</div>
<!-- END Liquid Glass Card -->