Metric Cards

<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
  <div class="mx-auto max-w-5xl px-6">
    <div class="mb-12 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cards-text)] sm:text-4xl">Key metrics</h2>
      <p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-cards-text-soft)]">Compare performance across core indicators.</p>
    </div>

    <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
      <!-- Revenue -->
      <div class="rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6">
        <p class="text-sm font-medium text-[var(--ws-cards-text-soft)]">Revenue</p>
        <p class="mt-2 text-3xl font-bold text-[var(--ws-cards-text)]">$48.2k</p>
        <div class="mt-2 flex items-center gap-1.5">
          <span class="inline-flex items-center gap-0.5 text-xs font-medium text-emerald-600">
            <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"/></svg>
            +12.5%
          </span>
          <span class="text-xs text-[var(--ws-cards-text-soft)]">vs last month</span>
        </div>
        <!-- Mini bar chart -->
        <div class="mt-4 flex items-end gap-1.5">
          <div class="h-6 w-full rounded-sm bg-indigo-200"></div>
          <div class="h-8 w-full rounded-sm bg-indigo-300"></div>
          <div class="h-5 w-full rounded-sm bg-indigo-200"></div>
          <div class="h-10 w-full rounded-sm bg-indigo-500"></div>
        </div>
      </div>

      <!-- Users -->
      <div class="rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6">
        <p class="text-sm font-medium text-[var(--ws-cards-text-soft)]">Active users</p>
        <p class="mt-2 text-3xl font-bold text-[var(--ws-cards-text)]">3,842</p>
        <div class="mt-2 flex items-center gap-1.5">
          <span class="inline-flex items-center gap-0.5 text-xs font-medium text-emerald-600">
            <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"/></svg>
            +8.1%
          </span>
          <span class="text-xs text-[var(--ws-cards-text-soft)]">vs last month</span>
        </div>
        <!-- Mini bar chart -->
        <div class="mt-4 flex items-end gap-1.5">
          <div class="h-4 w-full rounded-sm bg-emerald-200"></div>
          <div class="h-7 w-full rounded-sm bg-emerald-300"></div>
          <div class="h-9 w-full rounded-sm bg-emerald-400"></div>
          <div class="h-10 w-full rounded-sm bg-emerald-500"></div>
        </div>
      </div>

      <!-- Churn -->
      <div class="rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6">
        <p class="text-sm font-medium text-[var(--ws-cards-text-soft)]">Churn rate</p>
        <p class="mt-2 text-3xl font-bold text-[var(--ws-cards-text)]">2.1%</p>
        <div class="mt-2 flex items-center gap-1.5">
          <span class="inline-flex items-center gap-0.5 text-xs font-medium text-rose-600">
            <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25"/></svg>
            +0.3%
          </span>
          <span class="text-xs text-[var(--ws-cards-text-soft)]">vs last month</span>
        </div>
        <!-- Mini bar chart -->
        <div class="mt-4 flex items-end gap-1.5">
          <div class="h-10 w-full rounded-sm bg-rose-400"></div>
          <div class="h-7 w-full rounded-sm bg-rose-300"></div>
          <div class="h-8 w-full rounded-sm bg-rose-300"></div>
          <div class="h-6 w-full rounded-sm bg-rose-200"></div>
        </div>
      </div>
    </div>
  </div>
</section>