Event Schedule With Speakers

Fetch pattern JSON: curl https://webspire.de/patterns/event-schedule/with-speakers.json

with-speakers.html

<section class="ws-event-schedule bg-[var(--ws-event-schedule-bg)]" aria-label="Conference schedule">
  <div class="mx-auto max-w-4xl px-4 py-16 sm:py-24">
    <div class="text-center">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Conference Schedule</h2>
      <p class="mt-2 text-lg text-gray-600">Three days of talks, workshops, and networking.</p>
    </div>

    <!-- Tabs -->
    <div class="mt-10" role="tablist" aria-label="Schedule days">
      <div class="flex gap-1 rounded-lg bg-gray-100 p-1">
        <button role="tab" aria-selected="true" aria-controls="day-1-panel" id="day-1-tab" class="flex-1 rounded-md bg-[var(--ws-event-schedule-bg)] px-4 py-2.5 text-sm font-semibold text-gray-900 shadow-sm">
          Day 1 &mdash; March 21
        </button>
        <button role="tab" aria-selected="false" aria-controls="day-2-panel" id="day-2-tab" class="flex-1 rounded-md px-4 py-2.5 text-sm font-medium text-gray-600 hover:text-gray-900">
          Day 2 &mdash; March 22
        </button>
        <button role="tab" aria-selected="false" aria-controls="day-3-panel" id="day-3-tab" class="flex-1 rounded-md px-4 py-2.5 text-sm font-medium text-gray-600 hover:text-gray-900">
          Day 3 &mdash; March 23
        </button>
      </div>
    </div>

    <!-- Day 1 Panel -->
    <div role="tabpanel" id="day-1-panel" aria-labelledby="day-1-tab" class="mt-8 space-y-4">
      <!-- Session 1 -->
      <div class="flex gap-4 rounded-xl border border-gray-200 p-4 sm:gap-6 sm:p-5">
        <div class="w-28 shrink-0 pt-0.5">
          <time datetime="2026-03-21T09:00" class="text-sm font-semibold text-gray-900">09:00 – 10:00</time>
        </div>
        <div class="flex-1">
          <h3 class="font-semibold text-gray-900">Opening Keynote: The Future of the Web Platform</h3>
          <div class="mt-2 flex items-center gap-3">
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white" aria-hidden="true">AM</span>
            <div>
              <p class="text-sm font-medium text-gray-900">Dr. Anna Meier</p>
              <p class="text-xs text-gray-500">CTO, WebForward Inc.</p>
            </div>
          </div>
          <span class="mt-3 inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">Main Hall</span>
        </div>
      </div>

      <!-- Session 2 -->
      <div class="flex gap-4 rounded-xl border border-gray-200 p-4 sm:gap-6 sm:p-5">
        <div class="w-28 shrink-0 pt-0.5">
          <time datetime="2026-03-21T10:30" class="text-sm font-semibold text-gray-900">10:30 – 11:30</time>
        </div>
        <div class="flex-1">
          <h3 class="font-semibold text-gray-900">CSS Architecture at Scale</h3>
          <div class="mt-2 flex items-center gap-3">
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-600 text-xs font-bold text-white" aria-hidden="true">JP</span>
            <div>
              <p class="text-sm font-medium text-gray-900">James Park</p>
              <p class="text-xs text-gray-500">Lead Engineer, StyleCo</p>
            </div>
          </div>
          <span class="mt-3 inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800">Room A</span>
        </div>
      </div>

      <!-- Session 3 -->
      <div class="flex gap-4 rounded-xl border border-gray-200 p-4 sm:gap-6 sm:p-5">
        <div class="w-28 shrink-0 pt-0.5">
          <time datetime="2026-03-21T13:00" class="text-sm font-semibold text-gray-900">13:00 – 14:00</time>
        </div>
        <div class="flex-1">
          <h3 class="font-semibold text-gray-900">Building Design Systems with Tailwind</h3>
          <div class="mt-2 flex items-center gap-3">
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white" aria-hidden="true">LN</span>
            <div>
              <p class="text-sm font-medium text-gray-900">Lisa Nguyen</p>
              <p class="text-xs text-gray-500">Design Lead, PixelCraft</p>
            </div>
          </div>
          <span class="mt-3 inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">Main Hall</span>
        </div>
      </div>

      <!-- Session 4 -->
      <div class="flex gap-4 rounded-xl border border-gray-200 p-4 sm:gap-6 sm:p-5">
        <div class="w-28 shrink-0 pt-0.5">
          <time datetime="2026-03-21T14:30" class="text-sm font-semibold text-gray-900">14:30 – 15:30</time>
        </div>
        <div class="flex-1">
          <h3 class="font-semibold text-gray-900">Accessibility Beyond Compliance</h3>
          <div class="mt-2 flex items-center gap-3">
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-rose-600 text-xs font-bold text-white" aria-hidden="true">MR</span>
            <div>
              <p class="text-sm font-medium text-gray-900">Maria Rodriguez</p>
              <p class="text-xs text-gray-500">A11y Consultant</p>
            </div>
          </div>
          <span class="mt-3 inline-flex items-center rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-800">Room B</span>
        </div>
      </div>

      <!-- Session 5 -->
      <div class="flex gap-4 rounded-xl border border-gray-200 p-4 sm:gap-6 sm:p-5">
        <div class="w-28 shrink-0 pt-0.5">
          <time datetime="2026-03-21T16:00" class="text-sm font-semibold text-gray-900">16:00 – 17:00</time>
        </div>
        <div class="flex-1">
          <h3 class="font-semibold text-gray-900">Panel: AI-Assisted Development Workflows</h3>
          <div class="mt-2 flex items-center gap-3">
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-amber-600 text-xs font-bold text-white" aria-hidden="true">PD</span>
            <div>
              <p class="text-sm font-medium text-gray-900">Panel Discussion</p>
              <p class="text-xs text-gray-500">4 speakers</p>
            </div>
          </div>
          <span class="mt-3 inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">Main Hall</span>
        </div>
      </div>
    </div>

    <!-- Day 2 Panel (hidden) -->
    <div role="tabpanel" id="day-2-panel" aria-labelledby="day-2-tab" class="mt-8 hidden space-y-4">
      <div class="flex gap-4 rounded-xl border border-gray-200 p-4 sm:gap-6 sm:p-5">
        <div class="w-28 shrink-0 pt-0.5">
          <time datetime="2026-03-22T09:00" class="text-sm font-semibold text-gray-900">09:00 – 10:00</time>
        </div>
        <div class="flex-1">
          <h3 class="font-semibold text-gray-900">Server Components: A New Mental Model</h3>
          <div class="mt-2 flex items-center gap-3">
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-sky-600 text-xs font-bold text-white" aria-hidden="true">TK</span>
            <div>
              <p class="text-sm font-medium text-gray-900">Tom Kowalski</p>
              <p class="text-xs text-gray-500">Core Team, Astro</p>
            </div>
          </div>
          <span class="mt-3 inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">Main Hall</span>
        </div>
      </div>
    </div>

    <!-- Day 3 Panel (hidden) -->
    <div role="tabpanel" id="day-3-panel" aria-labelledby="day-3-tab" class="mt-8 hidden space-y-4">
      <div class="flex gap-4 rounded-xl border border-gray-200 p-4 sm:gap-6 sm:p-5">
        <div class="w-28 shrink-0 pt-0.5">
          <time datetime="2026-03-23T09:00" class="text-sm font-semibold text-gray-900">09:00 – 10:30</time>
        </div>
        <div class="flex-1">
          <h3 class="font-semibold text-gray-900">Workshop: Hands-On Tailwind v4</h3>
          <div class="mt-2 flex items-center gap-3">
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-teal-600 text-xs font-bold text-white" aria-hidden="true">SB</span>
            <div>
              <p class="text-sm font-medium text-gray-900">Sophie Berg</p>
              <p class="text-xs text-gray-500">Educator, TailwindLabs</p>
            </div>
          </div>
          <span class="mt-3 inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800">Workshop Room</span>
        </div>
      </div>
    </div>
  </div>
</section>

Details

Family

event-schedule

Tier

enhanced

Kind

section

Extends

event-schedule/base

Responsive Tailwind Only SSR Safe Copy & Paste

Stable Published

eventscheduleconferencetabsspeakerssessionsagenda

Slots

Name	Required	Description
heading	Yes	Section title and subtitle.
tabs	Yes	Day selection tabs.
sessions	Yes	Session cards with time, talk, speaker, and location.

Tabbed conference schedule with three day tabs (“Day 1 — March 21”, “Day 2 — March 22”, “Day 3 — March 23”). Only the active tab’s content is shown. Each session is a horizontal card with time on the left (e.g., “09:00 – 10:00”) and talk details on the right: title, speaker avatar (initials circle) with name and role, and a color-coded location badge. Day 1 shows 5 sessions; Days 2 and 3 are hidden with sample content. Tab switching requires minimal JS to toggle the hidden class.