Stat 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="mx-auto max-w-xs overflow-hidden rounded-2xl border border-[var(--ws-stat-widget-border)] bg-[var(--ws-stat-widget-bg)] shadow-md">
      <div class="px-6 pt-6 pb-2">
        <p class="text-sm font-medium text-[var(--ws-stat-widget-text-soft)]">Total Revenue</p>
        <div class="mt-2 flex items-baseline gap-3">
          <span class="text-3xl font-bold tracking-tight text-[var(--ws-stat-widget-text)]">$48,294</span>
          <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-1 text-xs text-[var(--ws-stat-widget-text-muted)]">vs. last month</p>
      </div>

      <div class="px-6 pt-4 pb-6">
        <div class="flex h-16 items-end gap-1.5" role="img" aria-label="Revenue trend over the last 6 periods">
          <div class="flex-1 rounded-sm bg-[var(--ws-stat-widget-accent-soft)]" style="height: 40%"></div>
          <div class="flex-1 rounded-sm bg-[var(--ws-stat-widget-accent-soft)]" style="height: 55%"></div>
          <div class="flex-1 rounded-sm bg-[var(--ws-stat-widget-accent-soft)]" style="height: 35%"></div>
          <div class="flex-1 rounded-sm bg-[var(--ws-stat-widget-accent-soft)]" style="height: 70%"></div>
          <div class="flex-1 rounded-sm bg-[var(--ws-stat-widget-accent-soft)]" style="height: 60%"></div>
          <div class="flex-1 rounded-sm bg-[var(--ws-stat-widget-accent)]" style="height: 90%"></div>
        </div>
      </div>
    </div>
  </div>
</section>