Storage Widget

<section class="ws-storage-widget bg-[var(--ws-storage-widget-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-xs overflow-hidden rounded-2xl border border-[var(--ws-storage-widget-border)] bg-[var(--ws-storage-widget-bg)] shadow-md">
      <div class="px-6 pt-6 pb-4">
        <div class="flex items-center justify-between">
          <p class="text-sm font-semibold text-[var(--ws-storage-widget-text)]">Storage</p>
          <span class="text-xs text-[var(--ws-storage-widget-text-muted)]">64.2 GB / 100 GB</span>
        </div>
      </div>

      <div class="px-6">
        <div class="flex h-3 w-full overflow-hidden rounded-full bg-[var(--ws-storage-widget-track)]" role="img" aria-label="Storage usage breakdown: Images 28 GB, Videos 22 GB, Documents 8 GB, Other 6 GB, Free 36 GB">
          <div class="h-full bg-sky-500" style="width: 28%"></div>
          <div class="h-full bg-violet-500" style="width: 22%"></div>
          <div class="h-full bg-[var(--ws-storage-widget-accent)]" style="width: 8%"></div>
          <div class="h-full bg-[var(--ws-storage-widget-text-muted)]" style="width: 6%"></div>
        </div>
      </div>

      <div class="px-6 pt-5 pb-6">
        <ul class="grid grid-cols-2 gap-x-4 gap-y-3" role="list">
          <li class="flex items-center gap-2">
            <span class="h-2.5 w-2.5 shrink-0 rounded-full bg-sky-500" aria-hidden="true"></span>
            <span class="text-xs text-[var(--ws-storage-widget-text-soft)]">Images</span>
            <span class="ml-auto text-xs font-medium text-[var(--ws-storage-widget-text)]">28 GB</span>
          </li>
          <li class="flex items-center gap-2">
            <span class="h-2.5 w-2.5 shrink-0 rounded-full bg-violet-500" aria-hidden="true"></span>
            <span class="text-xs text-[var(--ws-storage-widget-text-soft)]">Videos</span>
            <span class="ml-auto text-xs font-medium text-[var(--ws-storage-widget-text)]">22 GB</span>
          </li>
          <li class="flex items-center gap-2">
            <span class="h-2.5 w-2.5 shrink-0 rounded-full bg-[var(--ws-storage-widget-accent)]" aria-hidden="true"></span>
            <span class="text-xs text-[var(--ws-storage-widget-text-soft)]">Docs</span>
            <span class="ml-auto text-xs font-medium text-[var(--ws-storage-widget-text)]">8 GB</span>
          </li>
          <li class="flex items-center gap-2">
            <span class="h-2.5 w-2.5 shrink-0 rounded-full bg-[var(--ws-storage-widget-text-muted)]" aria-hidden="true"></span>
            <span class="text-xs text-[var(--ws-storage-widget-text-soft)]">Other</span>
            <span class="ml-auto text-xs font-medium text-[var(--ws-storage-widget-text)]">6 GB</span>
          </li>
          <li class="col-span-2 flex items-center gap-2">
            <span class="h-2.5 w-2.5 shrink-0 rounded-full bg-[var(--ws-storage-widget-track)]" aria-hidden="true"></span>
            <span class="text-xs text-[var(--ws-storage-widget-text-soft)]">Free</span>
            <span class="ml-auto text-xs font-medium text-[var(--ws-storage-widget-text)]">36 GB</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>