Compact Dense Timeline

<!--
  A tight log: a fixed, tabular-nums time column keeps timestamps aligned, and
  the rail is each row's own inline-start border with a small dot pulled onto
  it. The last row's border is made transparent so the line stops with the log.
-->
<ol class="mx-auto w-full max-w-lg">
  <li class="relative flex gap-3">
    <time class="w-16 shrink-0 pt-px text-right text-xs tabular-nums text-gray-400 dark:text-gray-500">09:24</time>
    <div class="relative flex-1 border-s border-gray-200 pb-4 ps-4 dark:border-gray-800">
      <span class="absolute -start-1 top-1 h-2 w-2 rounded-full bg-gray-300 dark:bg-gray-600" aria-hidden="true"></span>
      <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Deployment started</p>
      <p class="text-xs text-gray-500 dark:text-gray-400">build #4821 &middot; production</p>
    </div>
  </li>
  <li class="relative flex gap-3">
    <time class="w-16 shrink-0 pt-px text-right text-xs tabular-nums text-gray-400 dark:text-gray-500">09:26</time>
    <div class="relative flex-1 border-s border-gray-200 pb-4 ps-4 dark:border-gray-800">
      <span class="absolute -start-1 top-1 h-2 w-2 rounded-full bg-gray-300 dark:bg-gray-600" aria-hidden="true"></span>
      <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Migrations applied</p>
      <p class="text-xs text-gray-500 dark:text-gray-400">3 changes, no downtime</p>
    </div>
  </li>
  <li class="relative flex gap-3">
    <time class="w-16 shrink-0 pt-px text-right text-xs tabular-nums text-gray-400 dark:text-gray-500">09:31</time>
    <div class="relative flex-1 border-s border-transparent ps-4">
      <span class="absolute -start-1 top-1 h-2 w-2 rounded-full bg-emerald-500" aria-hidden="true"></span>
      <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Deployment healthy</p>
      <p class="text-xs text-gray-500 dark:text-gray-400">all checks green</p>
    </div>
  </li>
</ol>