Activity Feed Timeline

<!--
  Avatars are CSS gradients with initials, so the component needs no image host.
  The connector runs from just under one avatar to the next; it is dropped on
  the last row so the line does not dangle past the final entry.
-->
<ol class="mx-auto w-full max-w-xl">
  <li class="relative flex gap-4 pb-6">
    <span class="absolute left-[1.125rem] top-9 bottom-0 w-px -translate-x-1/2 bg-gray-200 dark:bg-gray-800" aria-hidden="true"></span>
    <span class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-indigo-500 text-xs font-semibold text-white">AL</span>
    <div class="min-w-0 flex-1 pt-1">
      <p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-semibold text-gray-900 dark:text-gray-100">Alex Lee</span> opened <span class="font-medium text-gray-900 dark:text-gray-100">Invoice #1024</span></p>
      <time class="mt-0.5 block text-xs text-gray-400 dark:text-gray-500">2 hours ago</time>
    </div>
  </li>

  <li class="relative flex gap-4 pb-6">
    <span class="absolute left-[1.125rem] top-9 bottom-0 w-px -translate-x-1/2 bg-gray-200 dark:bg-gray-800" aria-hidden="true"></span>
    <span class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-500 text-xs font-semibold text-white">MR</span>
    <div class="min-w-0 flex-1 pt-1">
      <p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-semibold text-gray-900 dark:text-gray-100">Maria Ruiz</span> commented on <span class="font-medium text-gray-900 dark:text-gray-100">Design review</span></p>
      <time class="mt-0.5 block text-xs text-gray-400 dark:text-gray-500">4 hours ago</time>
    </div>
  </li>

  <li class="relative flex gap-4">
    <span class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 to-rose-500 text-xs font-semibold text-white">JK</span>
    <div class="min-w-0 flex-1 pt-1">
      <p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-semibold text-gray-900 dark:text-gray-100">Jon Kim</span> closed <span class="font-medium text-gray-900 dark:text-gray-100">Sprint 42</span></p>
      <time class="mt-0.5 block text-xs text-gray-400 dark:text-gray-500">Yesterday</time>
    </div>
  </li>
</ol>