Progress Line Timeline

<!--
  Three states, and each is announced by more than colour: completed steps get a
  filled dot with a check, the current step gets a ringed hollow dot plus
  aria-current="step", upcoming steps get a muted outline. The connector below a
  completed step is filled blue; everything ahead is grey.
-->
<ol class="mx-auto w-full max-w-md">
  <li class="relative flex gap-4 pb-6">
    <div class="flex flex-col items-center">
      <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-600 text-white dark:bg-blue-500">
        <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" 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 0L3.3 9.7a1 1 0 0 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd" /></svg>
      </span>
      <span class="mt-1 w-0.5 grow bg-blue-600 dark:bg-blue-500" aria-hidden="true"></span>
    </div>
    <div class="-mt-0.5 pb-1">
      <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Order placed</h3>
      <p class="mt-0.5 text-sm text-gray-600 dark:text-gray-400">We received your order.</p>
    </div>
  </li>

  <li class="relative flex gap-4 pb-6" aria-current="step">
    <div class="flex flex-col items-center">
      <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 border-blue-600 bg-white dark:border-blue-500 dark:bg-gray-950">
        <span class="h-2 w-2 rounded-full bg-blue-600 dark:bg-blue-500"></span>
      </span>
      <span class="mt-1 w-0.5 grow bg-gray-200 dark:bg-gray-800" aria-hidden="true"></span>
    </div>
    <div class="-mt-0.5 pb-1">
      <h3 class="text-sm font-semibold text-blue-700 dark:text-blue-300">Packed</h3>
      <p class="mt-0.5 text-sm text-gray-600 dark:text-gray-400">Your parcel is being prepared.</p>
    </div>
  </li>

  <li class="relative flex gap-4">
    <div class="flex flex-col items-center">
      <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-950"></span>
    </div>
    <div class="-mt-0.5">
      <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400">Delivered</h3>
      <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-500">Estimated in 2 days.</p>
    </div>
  </li>
</ol>