Activity Feed Grouped

<div class="ws-activity-feed rounded-xl border border-[var(--ws-activity-feed-border)] bg-[var(--ws-activity-feed-bg)] p-6">
  <h3 class="mb-6 text-sm font-semibold text-[var(--ws-activity-feed-text)]">Activity</h3>

  <section aria-label="Today's activity">
    <h4 class="mb-3 text-xs font-semibold uppercase tracking-wider text-[var(--ws-activity-feed-text-soft)]">Today</h4>
    <ul class="mb-6 space-y-3" role="list">
      <li class="flex items-start gap-3">
        <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-bold text-indigo-700" aria-hidden="true">SK</div>
        <div class="min-w-0 flex-1">
          <p class="text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">Sarah Kim</span> pushed 3 commits to <span class="font-medium">main</span></p>
          <p class="mt-0.5 text-xs text-[var(--ws-activity-feed-text-soft)]">2 minutes ago</p>
        </div>
      </li>
      <li class="flex items-start gap-3">
        <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-xs font-bold text-emerald-700" aria-hidden="true">MR</div>
        <div class="min-w-0 flex-1">
          <p class="text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">Marco Rossi</span> completed task <span class="font-medium">Update dashboard</span></p>
          <p class="mt-0.5 text-xs text-[var(--ws-activity-feed-text-soft)]">15 minutes ago</p>
        </div>
      </li>
      <li class="flex items-start gap-3">
        <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-100 text-xs font-bold text-amber-700" aria-hidden="true">AJ</div>
        <div class="min-w-0 flex-1">
          <p class="text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">Aisha Johnson</span> commented on <span class="font-medium">PR #142</span></p>
          <p class="mt-0.5 text-xs text-[var(--ws-activity-feed-text-soft)]">1 hour ago</p>
        </div>
      </li>
    </ul>
  </section>

  <section aria-label="Yesterday's activity">
    <h4 class="mb-3 text-xs font-semibold uppercase tracking-wider text-[var(--ws-activity-feed-text-soft)]">Yesterday</h4>
    <ul class="space-y-3" role="list">
      <li class="flex items-start gap-3">
        <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-rose-100 text-xs font-bold text-rose-700" aria-hidden="true">DL</div>
        <div class="min-w-0 flex-1">
          <p class="text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">David Lee</span> opened issue <span class="font-medium">Fix sidebar overflow</span></p>
          <p class="mt-0.5 text-xs text-[var(--ws-activity-feed-text-soft)]">Yesterday at 4:30 PM</p>
        </div>
      </li>
      <li class="flex items-start gap-3">
        <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-violet-100 text-xs font-bold text-violet-700" aria-hidden="true">LW</div>
        <div class="min-w-0 flex-1">
          <p class="text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">Lisa Wang</span> merged <span class="font-medium">PR #139</span></p>
          <p class="mt-0.5 text-xs text-[var(--ws-activity-feed-text-soft)]">Yesterday at 11:15 AM</p>
        </div>
      </li>
    </ul>
  </section>
</div>