Stat Grid Widget

<section class="ws-stat-widget bg-[var(--ws-stat-widget-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">

      <!-- Users -->
      <article class="rounded-2xl border border-[var(--ws-stat-widget-border)] bg-[var(--ws-stat-widget-bg)] p-6 shadow-md">
        <div class="flex items-start justify-between">
          <div class="flex size-10 items-center justify-center rounded-xl bg-[var(--ws-stat-widget-accent-soft)]">
            <svg class="size-5 text-[var(--ws-stat-widget-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
            </svg>
          </div>
          <span class="inline-flex items-center gap-0.5 rounded-full bg-[var(--ws-stat-widget-positive)]/15 px-2 py-0.5 text-xs font-semibold text-[var(--ws-stat-widget-positive)]">
            <span aria-hidden="true">&uarr;</span>
            5.2%
          </span>
        </div>
        <p class="mt-4 text-sm font-medium text-[var(--ws-stat-widget-text-soft)]">Users</p>
        <p class="mt-1 text-2xl font-bold tracking-tight text-[var(--ws-stat-widget-text)]">2,847</p>
      </article>

      <!-- Revenue -->
      <article class="rounded-2xl border border-[var(--ws-stat-widget-border)] bg-[var(--ws-stat-widget-bg)] p-6 shadow-md">
        <div class="flex items-start justify-between">
          <div class="flex size-10 items-center justify-center rounded-xl bg-[var(--ws-stat-widget-accent-soft)]">
            <svg class="size-5 text-[var(--ws-stat-widget-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
            </svg>
          </div>
          <span class="inline-flex items-center gap-0.5 rounded-full bg-[var(--ws-stat-widget-positive)]/15 px-2 py-0.5 text-xs font-semibold text-[var(--ws-stat-widget-positive)]">
            <span aria-hidden="true">&uarr;</span>
            12.5%
          </span>
        </div>
        <p class="mt-4 text-sm font-medium text-[var(--ws-stat-widget-text-soft)]">Revenue</p>
        <p class="mt-1 text-2xl font-bold tracking-tight text-[var(--ws-stat-widget-text)]">$48.2k</p>
      </article>

      <!-- Orders -->
      <article class="rounded-2xl border border-[var(--ws-stat-widget-border)] bg-[var(--ws-stat-widget-bg)] p-6 shadow-md">
        <div class="flex items-start justify-between">
          <div class="flex size-10 items-center justify-center rounded-xl bg-[var(--ws-stat-widget-accent-soft)]">
            <svg class="size-5 text-[var(--ws-stat-widget-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
            </svg>
          </div>
          <span class="inline-flex items-center gap-0.5 rounded-full bg-[var(--ws-stat-widget-negative)]/15 px-2 py-0.5 text-xs font-semibold text-[var(--ws-stat-widget-negative)]">
            <span aria-hidden="true">&darr;</span>
            2.1%
          </span>
        </div>
        <p class="mt-4 text-sm font-medium text-[var(--ws-stat-widget-text-soft)]">Orders</p>
        <p class="mt-1 text-2xl font-bold tracking-tight text-[var(--ws-stat-widget-text)]">384</p>
      </article>

      <!-- Conversion -->
      <article class="rounded-2xl border border-[var(--ws-stat-widget-border)] bg-[var(--ws-stat-widget-bg)] p-6 shadow-md">
        <div class="flex items-start justify-between">
          <div class="flex size-10 items-center justify-center rounded-xl bg-[var(--ws-stat-widget-accent-soft)]">
            <svg class="size-5 text-[var(--ws-stat-widget-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
            </svg>
          </div>
          <span class="inline-flex items-center gap-0.5 rounded-full bg-[var(--ws-stat-widget-positive)]/15 px-2 py-0.5 text-xs font-semibold text-[var(--ws-stat-widget-positive)]">
            <span aria-hidden="true">&uarr;</span>
            0.8%
          </span>
        </div>
        <p class="mt-4 text-sm font-medium text-[var(--ws-stat-widget-text-soft)]">Conversion</p>
        <p class="mt-1 text-2xl font-bold tracking-tight text-[var(--ws-stat-widget-text)]">3.24%</p>
      </article>

    </div>
  </div>
</section>