Checkout Stepper

<!--
  A four-stage checkout. The labelled row would never fit 320px, so below sm the
  labels drop out of the row and the active stage is restated as a single line
  above it - the phone gets "Step 2 of 4: Shipping", the desktop gets the full
  labelled row.
-->
<nav aria-label="Checkout progress" class="w-full">
  <p class="mb-3 text-sm font-medium text-gray-900 sm:hidden dark:text-gray-100">
    <span class="text-gray-500 dark:text-gray-400">Step 2 of 4:</span> Shipping
  </p>
  <ol class="flex items-center">
    <li class="flex flex-1 items-center">
      <div class="flex items-center gap-2 sm:gap-3">
        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-600 text-sm font-semibold text-white">
          <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0l-3.5-3.5a1 1 0 1 1 1.4-1.4l2.8 2.8 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/></svg>
        </span>
        <span class="hidden text-sm font-medium text-gray-900 sm:inline dark:text-gray-100">Cart</span>
      </div>
      <span aria-hidden="true" class="mx-2 h-px flex-1 bg-blue-600 sm:mx-3"></span>
    </li>
    <li class="flex flex-1 items-center" aria-current="step">
      <div class="flex items-center gap-2 sm:gap-3">
        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 border-blue-600 text-sm font-semibold text-blue-600 dark:text-blue-400">2</span>
        <span class="hidden text-sm font-medium text-gray-900 sm:inline dark:text-gray-100">Shipping</span>
      </div>
      <span aria-hidden="true" class="mx-2 h-px flex-1 bg-gray-200 sm:mx-3 dark:bg-gray-700"></span>
    </li>
    <li class="flex flex-1 items-center">
      <div class="flex items-center gap-2 sm:gap-3">
        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gray-300 text-sm font-semibold text-gray-500 dark:border-gray-700 dark:text-gray-400">3</span>
        <span class="hidden text-sm font-medium text-gray-500 sm:inline dark:text-gray-400">Payment</span>
      </div>
      <span aria-hidden="true" class="mx-2 h-px flex-1 bg-gray-200 sm:mx-3 dark:bg-gray-700"></span>
    </li>
    <li class="flex items-center">
      <div class="flex items-center gap-2 sm:gap-3">
        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gray-300 text-sm font-semibold text-gray-500 dark:border-gray-700 dark:text-gray-400">4</span>
        <span class="hidden text-sm font-medium text-gray-500 sm:inline dark:text-gray-400">Review</span>
      </div>
    </li>
  </ol>
</nav>