Clickable Navigation Stepper

<!--
  Each marker is a real button, so it must clear a 40px touch target - hence the
  h-10 w-10 marker rather than the h-9 used by the read-only rows. Only visited
  and current steps are enabled; upcoming ones are disabled so you cannot skip
  ahead. Labels drop below sm exactly as the other horizontal rows do.
-->
<nav aria-label="Progress" class="w-full">
  <ol class="flex items-center">
    <li class="flex flex-1 items-center">
      <button type="button" class="group flex items-center gap-2 rounded-full text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 sm:gap-3 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
        <span class="flex h-10 w-10 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 pr-1 text-sm font-medium text-gray-900 sm:inline dark:text-gray-100">Details</span>
      </button>
      <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">
      <button type="button" class="group flex items-center gap-2 rounded-full text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 sm:gap-3 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
        <span class="flex h-10 w-10 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 pr-1 text-sm font-medium text-gray-900 sm:inline dark:text-gray-100">Address</span>
      </button>
      <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">
      <button type="button" disabled class="group flex cursor-not-allowed items-center gap-2 rounded-full text-left sm:gap-3">
        <span class="flex h-10 w-10 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 pr-1 text-sm font-medium text-gray-500 sm:inline dark:text-gray-400">Payment</span>
      </button>
    </li>
  </ol>
</nav>