Data Stats Base

<section class="ws-data-stats bg-[var(--ws-data-stats-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-sm rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
      <div class="flex items-start gap-4">
        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[var(--ws-data-stats-accent)]/10">
          <svg class="h-6 w-6 text-[var(--ws-data-stats-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" 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>
        <div>
          <p class="text-sm font-medium text-[var(--ws-data-stats-text-soft)]">Total Revenue</p>
          <p class="mt-1 text-3xl font-bold tracking-tight text-[var(--ws-data-stats-text)]">$45,231</p>
          <p class="mt-2 flex items-center gap-1 text-sm">
            <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 12V4m0 0L5 7m3-3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span class="font-medium text-emerald-600">+20.1%</span>
            <span class="text-[var(--ws-data-stats-text-soft)]">from last month</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>