Goal Progress Card

<!--
  A goal card is still a progressbar: aria-valuenow is the raw amount raised and
  aria-valuemax is the goal, so a screen reader hears "18,500 of 25,000", while
  the bar clamps its width to 100% so an over-funded goal can't overflow.
-->
<div class="w-full max-w-sm rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
  <div class="flex items-baseline justify-between gap-3">
    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Community fund</h3>
    <span class="text-xs font-medium text-gray-500 dark:text-gray-400">74%</span>
  </div>
  <p class="mt-2 flex items-baseline gap-1.5">
    <span class="text-2xl font-bold tabular-nums text-gray-900 dark:text-gray-100">$18,500</span>
    <span class="text-sm text-gray-500 dark:text-gray-400">of $25,000</span>
  </p>
  <div
    role="progressbar"
    aria-valuenow="18500"
    aria-valuemin="0"
    aria-valuemax="25000"
    aria-label="Community fund"
    class="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"
  >
    <div class="h-full rounded-full bg-emerald-600 transition-[width] duration-500 ease-out motion-reduce:transition-none dark:bg-emerald-500" style="width: 74%"></div>
  </div>
  <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">312 backers &middot; 6 days left</p>
</div>