Event Schedule Timeline

<section class="ws-event-schedule" aria-label="Event timeline">
  <div class="mx-auto max-w-3xl px-4 py-12">
    <h2 class="mb-2 text-2xl font-bold text-slate-900">Event Timeline</h2>
    <p class="mb-10 text-sm text-slate-500">March 21, 2026</p>

    <div role="list">

      <!-- Event 1 -->
      <div class="flex gap-4" role="listitem">
        <div class="w-14 shrink-0 pt-4 text-right">
          <time datetime="2026-03-21T09:00" class="text-sm font-semibold text-slate-900">09:00</time>
        </div>
        <div class="flex flex-col items-center">
          <div class="h-4"></div>
          <div class="h-3 w-3 shrink-0 rounded-full border-2 border-blue-500 bg-[var(--ws-event-schedule-bg)]"></div>
          <div class="w-px flex-1 bg-slate-200"></div>
        </div>
        <div class="flex-1 pb-8 pt-1">
          <div class="rounded-lg border border-slate-200 bg-[var(--ws-event-schedule-bg)] p-4 shadow-sm">
            <h3 class="text-sm font-semibold text-slate-900">Opening Keynote: The Future of Web</h3>
            <p class="mt-1 text-sm text-slate-500">Dr. Anna Meier</p>
            <span class="mt-2 inline-flex items-center rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">Main Hall</span>
          </div>
        </div>
      </div>

      <!-- Event 2 -->
      <div class="flex gap-4" role="listitem">
        <div class="w-14 shrink-0 pt-4 text-right">
          <time datetime="2026-03-21T10:30" class="text-sm font-semibold text-slate-900">10:30</time>
        </div>
        <div class="flex flex-col items-center">
          <div class="h-4"></div>
          <div class="h-3 w-3 shrink-0 rounded-full border-2 border-emerald-500 bg-[var(--ws-event-schedule-bg)]"></div>
          <div class="w-px flex-1 bg-slate-200"></div>
        </div>
        <div class="flex-1 pb-8 pt-1">
          <div class="rounded-lg border border-slate-200 bg-[var(--ws-event-schedule-bg)] p-4 shadow-sm">
            <h3 class="text-sm font-semibold text-slate-900">CSS Architecture at Scale</h3>
            <p class="mt-1 text-sm text-slate-500">James Park</p>
            <span class="mt-2 inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Room A</span>
          </div>
        </div>
      </div>

      <!-- Event 3 -->
      <div class="flex gap-4" role="listitem">
        <div class="w-14 shrink-0 pt-4 text-right">
          <time datetime="2026-03-21T13:00" class="text-sm font-semibold text-slate-900">13:00</time>
        </div>
        <div class="flex flex-col items-center">
          <div class="h-4"></div>
          <div class="h-3 w-3 shrink-0 rounded-full border-2 border-blue-500 bg-[var(--ws-event-schedule-bg)]"></div>
          <div class="w-px flex-1 bg-slate-200"></div>
        </div>
        <div class="flex-1 pb-8 pt-1">
          <div class="rounded-lg border border-slate-200 bg-[var(--ws-event-schedule-bg)] p-4 shadow-sm">
            <h3 class="text-sm font-semibold text-slate-900">Building Design Systems with Tailwind</h3>
            <p class="mt-1 text-sm text-slate-500">Lisa Nguyen</p>
            <span class="mt-2 inline-flex items-center rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">Main Hall</span>
          </div>
        </div>
      </div>

      <!-- Event 4 (last) -->
      <div class="flex gap-4" role="listitem">
        <div class="w-14 shrink-0 pt-4 text-right">
          <time datetime="2026-03-21T15:00" class="text-sm font-semibold text-slate-900">15:00</time>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-px flex-1 bg-slate-200"></div>
          <div class="h-3 w-3 shrink-0 rounded-full border-2 border-purple-500 bg-[var(--ws-event-schedule-bg)]"></div>
          <div class="h-4"></div>
        </div>
        <div class="flex-1 pt-1">
          <div class="rounded-lg border border-slate-200 bg-[var(--ws-event-schedule-bg)] p-4 shadow-sm">
            <h3 class="text-sm font-semibold text-slate-900">Performance Panel: Core Web Vitals</h3>
            <p class="mt-1 text-sm text-slate-500">Panel Discussion</p>
            <span class="mt-2 inline-flex items-center rounded-full bg-purple-50 px-2.5 py-0.5 text-xs font-medium text-purple-700">Room B</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>