Alternating Timeline

<!--
  Single column is the base layout; the left/right alternation is a md-and-up
  enhancement. On a phone the rail is pinned to the left and every row clears it
  with ps-12 - two half-width cards straddling a centre line is unreadable at
  320px. From md the rail centres and each row becomes a 2-col grid, with the
  content dropped into column 1 (right-aligned toward the line) or column 2.
-->
<ol class="relative mx-auto w-full max-w-3xl">
  <span class="absolute bottom-2 top-2 left-4 w-px bg-gray-200 md:left-1/2 md:-translate-x-1/2 dark:bg-gray-800" aria-hidden="true"></span>

  <li class="relative mb-8 ps-12 last:mb-0 md:grid md:grid-cols-2 md:gap-x-10 md:ps-0">
    <span class="absolute left-4 top-1.5 h-3 w-3 -translate-x-1/2 rounded-full border-2 border-white bg-blue-600 md:left-1/2 dark:border-gray-950 dark:bg-blue-500" aria-hidden="true"></span>
    <div class="md:col-start-1 md:text-right">
      <time class="block text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">2019</time>
      <h3 class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Founded</h3>
      <p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Two people, one laptop, a very long to-do list.</p>
    </div>
  </li>

  <li class="relative mb-8 ps-12 last:mb-0 md:grid md:grid-cols-2 md:gap-x-10 md:ps-0">
    <span class="absolute left-4 top-1.5 h-3 w-3 -translate-x-1/2 rounded-full border-2 border-white bg-blue-600 md:left-1/2 dark:border-gray-950 dark:bg-blue-500" aria-hidden="true"></span>
    <div class="md:col-start-2">
      <time class="block text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">2022</time>
      <h3 class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">First 1,000 customers</h3>
      <p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Word of mouth did what the ad budget could not.</p>
    </div>
  </li>

  <li class="relative mb-8 ps-12 last:mb-0 md:grid md:grid-cols-2 md:gap-x-10 md:ps-0">
    <span class="absolute left-4 top-1.5 h-3 w-3 -translate-x-1/2 rounded-full border-2 border-white bg-blue-600 md:left-1/2 dark:border-gray-950 dark:bg-blue-500" aria-hidden="true"></span>
    <div class="md:col-start-1 md:text-right">
      <time class="block text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">2026</time>
      <h3 class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Global launch</h3>
      <p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Now serving teams in over sixty countries.</p>
    </div>
  </li>
</ol>