Goal Tracker

<div class="ws-progress-widget rounded-2xl border p-6 max-w-sm w-full"
     style="
       --ws-progress-widget-bg: oklch(0.99 0.005 75);
       --ws-progress-widget-text: oklch(0.25 0.02 75);
       --ws-progress-widget-text-soft: oklch(0.40 0.015 75);
       --ws-progress-widget-text-muted: oklch(0.55 0.01 75);
       --ws-progress-widget-border: oklch(0.90 0.01 75);
       --ws-progress-widget-accent: oklch(0.55 0.15 250);
       --ws-progress-widget-accent-soft: oklch(0.92 0.04 250);
       --ws-progress-widget-track: oklch(0.93 0.01 75);
       background: var(--ws-progress-widget-bg);
       color: var(--ws-progress-widget-text);
       border-color: var(--ws-progress-widget-border);
     ">

  <h2 class="text-lg font-semibold tracking-tight mb-5"
      style="color: var(--ws-progress-widget-text);">Weekly Goals</h2>

  <div class="flex flex-col gap-5">

    <!-- Steps -->
    <div>
      <div class="flex items-baseline justify-between mb-1.5">
        <span class="text-sm font-medium" style="color: var(--ws-progress-widget-text);">Steps</span>
        <span class="text-xs tabular-nums" style="color: var(--ws-progress-widget-text-muted);">8,432 / 10,000 &middot; 84%</span>
      </div>
      <div class="h-2 w-full rounded-full overflow-hidden" style="background: var(--ws-progress-widget-track);"
           role="progressbar" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100" aria-label="Steps: 84 percent">
        <div class="h-full rounded-full" style="width: 84%; background: oklch(0.55 0.15 155);"></div>
      </div>
    </div>

    <!-- Water -->
    <div>
      <div class="flex items-baseline justify-between mb-1.5">
        <span class="text-sm font-medium" style="color: var(--ws-progress-widget-text);">Water</span>
        <span class="text-xs tabular-nums" style="color: var(--ws-progress-widget-text-muted);">6 / 8 glasses &middot; 75%</span>
      </div>
      <div class="h-2 w-full rounded-full overflow-hidden" style="background: var(--ws-progress-widget-track);"
           role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Water: 75 percent">
        <div class="h-full rounded-full" style="width: 75%; background: var(--ws-progress-widget-accent);"></div>
      </div>
    </div>

    <!-- Reading -->
    <div>
      <div class="flex items-baseline justify-between mb-1.5">
        <span class="text-sm font-medium" style="color: var(--ws-progress-widget-text);">Reading</span>
        <span class="text-xs tabular-nums" style="color: var(--ws-progress-widget-text-muted);">45 / 60 min &middot; 75%</span>
      </div>
      <div class="h-2 w-full rounded-full overflow-hidden" style="background: var(--ws-progress-widget-track);"
           role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Reading: 75 percent">
        <div class="h-full rounded-full" style="width: 75%; background: var(--ws-progress-widget-accent);"></div>
      </div>
    </div>

    <!-- Exercise -->
    <div>
      <div class="flex items-baseline justify-between mb-1.5">
        <span class="text-sm font-medium" style="color: var(--ws-progress-widget-text);">Exercise</span>
        <span class="text-xs tabular-nums" style="color: var(--ws-progress-widget-text-muted);">2 / 3 sessions &middot; 67%</span>
      </div>
      <div class="h-2 w-full rounded-full overflow-hidden" style="background: var(--ws-progress-widget-track);"
           role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" aria-label="Exercise: 67 percent">
        <div class="h-full rounded-full" style="width: 67%; background: oklch(0.55 0.15 310);"></div>
      </div>
    </div>

  </div>

</div>