Timeline Vertical Feed

<section class="ws-timeline ws-timeline-feed mx-auto max-w-2xl px-6 py-12">
  <h2 class="mb-8 text-2xl font-bold text-[var(--ws-color-text)]">Activity Log</h2>

  <div class="relative">
    <!-- Vertical connector -->
    <div class="absolute left-[18px] top-2 h-[calc(100%-16px)] w-px bg-[var(--ws-color-border)]"></div>

    <div class="space-y-6">
      <!-- Entry -->
      <div class="relative flex gap-4">
        <div class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-100">
          <svg class="h-4 w-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
        </div>
        <div class="flex-1 rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-4 shadow-sm">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <div class="h-6 w-6 rounded-full bg-slate-300"></div>
              <span class="text-sm font-medium text-[var(--ws-color-text)]">Sarah Chen</span>
            </div>
            <time class="text-xs text-[var(--ws-color-text-muted)]">2 hours ago</time>
          </div>
          <p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Created new project <span class="font-medium text-[var(--ws-color-text)]">"Design System v2"</span></p>
        </div>
      </div>

      <!-- Entry -->
      <div class="relative flex gap-4">
        <div class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-100">
          <svg class="h-4 w-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
        </div>
        <div class="flex-1 rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-4 shadow-sm">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <div class="h-6 w-6 rounded-full bg-slate-400"></div>
              <span class="text-sm font-medium text-[var(--ws-color-text)]">Alex Rivera</span>
            </div>
            <time class="text-xs text-[var(--ws-color-text-muted)]">5 hours ago</time>
          </div>
          <p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Completed task <span class="font-medium text-[var(--ws-color-text)]">"API Documentation"</span></p>
          <span class="mt-2 inline-block rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">Done</span>
        </div>
      </div>

      <!-- Entry -->
      <div class="relative flex gap-4">
        <div class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-amber-100">
          <svg class="h-4 w-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
        </div>
        <div class="flex-1 rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-4 shadow-sm">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <div class="h-6 w-6 rounded-full bg-slate-500"></div>
              <span class="text-sm font-medium text-[var(--ws-color-text)]">Jordan Park</span>
            </div>
            <time class="text-xs text-[var(--ws-color-text-muted)]">Yesterday</time>
          </div>
          <p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Commented on <span class="font-medium text-[var(--ws-color-text)]">"Sprint Planning"</span></p>
          <blockquote class="mt-2 border-l-2 border-[var(--ws-color-border)] pl-3 text-xs italic text-[var(--ws-color-text-muted)]">"We should prioritize the auth flow before the dashboard widgets."</blockquote>
        </div>
      </div>

      <!-- Date separator -->
      <div class="relative flex items-center gap-4">
        <div class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] text-xs font-bold text-[var(--ws-color-text-muted)]">
          18
        </div>
        <span class="text-xs font-medium uppercase tracking-wider text-[var(--ws-color-text-muted)]">March 18, 2026</span>
      </div>

      <!-- Entry -->
      <div class="relative flex gap-4">
        <div class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-purple-100">
          <svg class="h-4 w-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
        </div>
        <div class="flex-1 rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-4 shadow-sm">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <div class="h-6 w-6 rounded-full bg-slate-300"></div>
              <span class="text-sm font-medium text-[var(--ws-color-text)]">Sarah Chen</span>
            </div>
            <time class="text-xs text-[var(--ws-color-text-muted)]">Mar 18</time>
          </div>
          <p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Uploaded 3 files to <span class="font-medium text-[var(--ws-color-text)]">"Brand Assets"</span></p>
        </div>
      </div>
    </div>
  </div>
</section>