Stats Comparison

<section class="ws-data-stats bg-[var(--ws-data-stats-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
      <div class="rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
        <h3 class="text-sm font-semibold text-[var(--ws-data-stats-text)]">Revenue</h3>
        <div class="mt-4 grid grid-cols-2 gap-4">
          <div>
            <p class="text-xs font-medium text-[var(--ws-data-stats-text-soft)]">This month</p>
            <p class="mt-1 text-xl font-bold text-[var(--ws-data-stats-text)]">$24,500</p>
          </div>
          <div>
            <p class="text-xs font-medium text-[var(--ws-data-stats-text-soft)]">Last month</p>
            <p class="mt-1 text-xl font-bold text-[var(--ws-data-stats-text-soft)]">$21,200</p>
          </div>
        </div>
        <div class="mt-4 flex items-center gap-2">
          <span class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">
            <svg class="h-3 w-3" fill="none" viewBox="0 0 12 12" aria-hidden="true"><path d="M6 9V3m0 0L3.5 5.5M6 3l2.5 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            +15.6%
          </span>
          <span class="text-xs text-[var(--ws-data-stats-text-soft)]">increase</span>
        </div>
        <div class="mt-4 flex gap-2" aria-label="Revenue comparison bars">
          <div class="flex flex-1 flex-col gap-1">
            <div class="h-2 rounded-full bg-[var(--ws-data-stats-accent)]" style="width: 100%"></div>
            <span class="text-[10px] text-[var(--ws-data-stats-text-soft)]">Current</span>
          </div>
          <div class="flex flex-1 flex-col gap-1">
            <div class="h-2 rounded-full bg-[var(--ws-data-stats-border)]" style="width: 86%"></div>
            <span class="text-[10px] text-[var(--ws-data-stats-text-soft)]">Previous</span>
          </div>
        </div>
      </div>

      <div class="rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
        <h3 class="text-sm font-semibold text-[var(--ws-data-stats-text)]">Users</h3>
        <div class="mt-4 grid grid-cols-2 gap-4">
          <div>
            <p class="text-xs font-medium text-[var(--ws-data-stats-text-soft)]">This month</p>
            <p class="mt-1 text-xl font-bold text-[var(--ws-data-stats-text)]">1,890</p>
          </div>
          <div>
            <p class="text-xs font-medium text-[var(--ws-data-stats-text-soft)]">Last month</p>
            <p class="mt-1 text-xl font-bold text-[var(--ws-data-stats-text-soft)]">2,100</p>
          </div>
        </div>
        <div class="mt-4 flex items-center gap-2">
          <span class="inline-flex items-center gap-1 rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-semibold text-red-700">
            <svg class="h-3 w-3" fill="none" viewBox="0 0 12 12" aria-hidden="true"><path d="M6 3v6m0 0L3.5 6.5M6 9l2.5-2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            -10%
          </span>
          <span class="text-xs text-[var(--ws-data-stats-text-soft)]">decrease</span>
        </div>
        <div class="mt-4 flex gap-2" aria-label="Users comparison bars">
          <div class="flex flex-1 flex-col gap-1">
            <div class="h-2 rounded-full bg-[var(--ws-data-stats-accent)]" style="width: 90%"></div>
            <span class="text-[10px] text-[var(--ws-data-stats-text-soft)]">Current</span>
          </div>
          <div class="flex flex-1 flex-col gap-1">
            <div class="h-2 rounded-full bg-[var(--ws-data-stats-border)]" style="width: 100%"></div>
            <span class="text-[10px] text-[var(--ws-data-stats-text-soft)]">Previous</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>