Milestone Cards Timeline

<!--
  A rail with a circular marker per milestone and a card beside it. The marker is
  2.5rem wide and the rail sits at left-5 (1.25rem) so it runs through the centre
  of every marker. Cards carry their own border, so the whole row reads on either
  theme without a surface behind it.
-->
<ol class="relative mx-auto w-full max-w-2xl">
  <span class="absolute bottom-4 left-5 top-4 w-px bg-gray-200 dark:bg-gray-800" aria-hidden="true"></span>

  <li class="relative flex gap-5 pb-6 last:pb-0">
    <span class="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-gray-200 bg-white text-blue-600 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-blue-400">
      <svg class="h-5 w-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>
    <div class="flex-1 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900">
      <div class="flex flex-wrap items-center justify-between gap-2">
        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Incorporated</h3>
        <time class="text-xs text-gray-500 dark:text-gray-400">Jan 2019</time>
      </div>
      <p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Signed the papers and named the company.</p>
    </div>
  </li>

  <li class="relative flex gap-5 pb-6 last:pb-0">
    <span class="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-gray-200 bg-white text-blue-600 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-blue-400">
      <svg class="h-5 w-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>
    <div class="flex-1 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900">
      <div class="flex flex-wrap items-center justify-between gap-2">
        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">First hire</h3>
        <time class="text-xs text-gray-500 dark:text-gray-400">Aug 2020</time>
      </div>
      <p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Employee number three still runs the support desk.</p>
    </div>
  </li>

  <li class="relative flex gap-5 pb-6 last:pb-0">
    <span class="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-gray-200 bg-white text-blue-600 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-blue-400">
      <svg class="h-5 w-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>
    <div class="flex-1 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900">
      <div class="flex flex-wrap items-center justify-between gap-2">
        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Profitable</h3>
        <time class="text-xs text-gray-500 dark:text-gray-400">2024</time>
      </div>
      <p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Five years in, the books finally turned black.</p>
    </div>
  </li>
</ol>