Horizontal Numbered Stepper

<!--
  Labels sit beside the markers only from sm up. In a four-step row on a 320px
  phone the text would blow past the viewport, so below sm the markers stand
  alone and the connectors carry the eye. The line before a step is coloured
  only when that step is done; aria-current marks the active <li>.
-->
<nav aria-label="Progress" class="w-full">
  <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">Account</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">Profile</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">Billing</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">Done</span>
      </div>
    </li>
  </ol>
</nav>