Bar Chart Card

<section class="ws-chart-card bg-[var(--ws-chart-card-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-md overflow-hidden rounded-2xl border border-[var(--ws-chart-card-border)] bg-[var(--ws-chart-card-bg)] shadow-md">
      <div class="px-6 py-5">
        <p class="text-sm font-medium text-[var(--ws-chart-card-text-soft)]">Revenue</p>
        <div class="mt-1 flex items-baseline gap-3">
          <h3 class="text-3xl font-bold tracking-tight text-[var(--ws-chart-card-text)]">$12,450</h3>
          <span class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 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 2v8M6 2L3 5M6 2l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            +12%
          </span>
          <span class="text-xs text-[var(--ws-chart-card-text-soft)]">vs last month</span>
        </div>
      </div>

      <div class="px-6 pb-6">
        <div class="flex h-44 items-end gap-2" role="img" aria-label="Vertical bar chart showing daily revenue for Mon through Sun">
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="w-full rounded-t-md bg-[var(--ws-chart-card-accent)] opacity-80" style="height: 60%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Mon</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="w-full rounded-t-md bg-[var(--ws-chart-card-accent)] opacity-80" style="height: 45%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Tue</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="w-full rounded-t-md bg-[var(--ws-chart-card-accent)]" style="height: 80%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Wed</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="w-full rounded-t-md bg-[var(--ws-chart-card-accent)] opacity-90" style="height: 70%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Thu</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="w-full rounded-t-md bg-[var(--ws-chart-card-accent)]" style="height: 100%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Fri</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="w-full rounded-t-md bg-[var(--ws-chart-card-accent)] opacity-70" style="height: 50%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Sat</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="w-full rounded-t-md bg-[var(--ws-chart-card-accent)] opacity-60" style="height: 35%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Sun</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>