Grouped Bar Chart

<section class="ws-chart bg-[var(--ws-chart-card-bg)] py-10">
  <div class="mx-auto max-w-2xl px-6">
    <div class="overflow-hidden rounded-2xl border border-[var(--ws-chart-card-border)] bg-[var(--ws-chart-card-bg)] p-6 shadow-sm">
      <div class="mb-5 flex items-start justify-between">
        <div>
          <p class="text-xs font-semibold uppercase tracking-widest text-[var(--ws-chart-card-text-soft)]">By Device</p>
          <h2 class="text-lg font-bold text-[var(--ws-chart-card-text)]">Users & Page Views</h2>
        </div>
        <div class="flex items-center gap-4 text-xs text-[var(--ws-chart-card-text-soft)]">
          <span class="flex items-center gap-1.5"><span class="inline-block h-2.5 w-2.5 rounded-sm bg-indigo-400"></span>Users</span>
          <span class="flex items-center gap-1.5"><span class="inline-block h-2.5 w-2.5 rounded-sm bg-teal-400"></span>Page Views</span>
        </div>
      </div>
      <!-- Grouped bars: max value 1553 -->
      <!-- Users: Desktop 510→33%, Mobile 653→42%, Tablet 255→16% -->
      <!-- PageViews: Desktop 1251→81%, Mobile 1553→100%, Tablet 1355→87% -->
      <div class="flex h-44 items-end gap-6" role="img" aria-label="Grouped bar chart comparing users and page views by device">
        <!-- Desktop -->
        <div class="flex flex-1 flex-col items-center gap-1.5">
          <div class="flex w-full items-end justify-center gap-1">
            <div class="flex-1 rounded-t-md bg-indigo-400" style="height:58px"></div>
            <div class="flex-1 rounded-t-md bg-teal-400" style="height:142px"></div>
          </div>
          <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Desktop</span>
        </div>
        <!-- Mobile -->
        <div class="flex flex-1 flex-col items-center gap-1.5">
          <div class="flex w-full items-end justify-center gap-1">
            <div class="flex-1 rounded-t-md bg-indigo-400" style="height:74px"></div>
            <div class="flex-1 rounded-t-md bg-teal-400" style="height:176px"></div>
          </div>
          <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Mobile</span>
        </div>
        <!-- Tablet -->
        <div class="flex flex-1 flex-col items-center gap-1.5">
          <div class="flex w-full items-end justify-center gap-1">
            <div class="flex-1 rounded-t-md bg-indigo-400" style="height:29px"></div>
            <div class="flex-1 rounded-t-md bg-teal-400" style="height:153px"></div>
          </div>
          <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Tablet</span>
        </div>
      </div>
    </div>
  </div>
</section>