Calendar Schedule

<section class="ws-calendar-widget bg-[var(--ws-calendar-widget-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-sm overflow-hidden rounded-2xl border border-[var(--ws-calendar-widget-border)] bg-[var(--ws-calendar-widget-bg)] shadow-md">

      <div class="border-b border-[var(--ws-calendar-widget-border)] px-5 py-4">
        <p class="text-xs font-medium uppercase tracking-wide text-[var(--ws-calendar-widget-text-muted)]">Schedule</p>
        <h2 class="mt-0.5 text-lg font-semibold text-[var(--ws-calendar-widget-text)]">Thursday, March 22</h2>
      </div>

      <div class="flex flex-col gap-3 p-5" role="list" aria-label="Today's schedule">

        <article class="flex gap-3 rounded-xl border-l-4 border-[var(--ws-calendar-widget-active)] bg-[var(--ws-calendar-widget-active)]/8 p-3.5" role="listitem">
          <div class="shrink-0">
            <p class="text-xs font-semibold text-[var(--ws-calendar-widget-active)]">9:00</p>
            <p class="text-xs text-[var(--ws-calendar-widget-text-muted)]">9:45</p>
          </div>
          <div class="min-w-0 flex-1">
            <h3 class="text-sm font-semibold text-[var(--ws-calendar-widget-text)]">Design Review</h3>
            <p class="mt-0.5 text-xs text-[var(--ws-calendar-widget-text-soft)]">Component library updates</p>
            <div class="mt-2 flex -space-x-1.5">
              <span class="flex size-6 items-center justify-center rounded-full bg-[var(--ws-calendar-widget-active)] text-[10px] font-semibold text-[var(--ws-calendar-widget-active-text)]" aria-label="Anna">AN</span>
              <span class="flex size-6 items-center justify-center rounded-full bg-[var(--ws-calendar-widget-text-muted)] text-[10px] font-semibold text-[var(--ws-calendar-widget-bg)]" aria-label="Max">MX</span>
            </div>
          </div>
        </article>

        <article class="flex gap-3 rounded-xl border-l-4 border-[var(--ws-calendar-widget-text-soft)] bg-[var(--ws-calendar-widget-border)]/40 p-3.5" role="listitem">
          <div class="shrink-0">
            <p class="text-xs font-semibold text-[var(--ws-calendar-widget-text)]">11:00</p>
            <p class="text-xs text-[var(--ws-calendar-widget-text-muted)]">11:30</p>
          </div>
          <div class="min-w-0 flex-1">
            <h3 class="text-sm font-semibold text-[var(--ws-calendar-widget-text)]">Standup</h3>
            <p class="mt-0.5 text-xs text-[var(--ws-calendar-widget-text-soft)]">Weekly team sync</p>
          </div>
        </article>

        <article class="flex gap-3 rounded-xl border-l-4 border-[var(--ws-calendar-widget-active)] bg-[var(--ws-calendar-widget-active)]/8 p-3.5" role="listitem">
          <div class="shrink-0">
            <p class="text-xs font-semibold text-[var(--ws-calendar-widget-active)]">14:00</p>
            <p class="text-xs text-[var(--ws-calendar-widget-text-muted)]">15:30</p>
          </div>
          <div class="min-w-0 flex-1">
            <h3 class="text-sm font-semibold text-[var(--ws-calendar-widget-text)]">Workshop: Tailwind v4</h3>
            <p class="mt-0.5 text-xs text-[var(--ws-calendar-widget-text-soft)]">Migration strategy session</p>
            <div class="mt-2 flex -space-x-1.5">
              <span class="flex size-6 items-center justify-center rounded-full bg-[var(--ws-calendar-widget-active)] text-[10px] font-semibold text-[var(--ws-calendar-widget-active-text)]" aria-label="Lena">LE</span>
              <span class="flex size-6 items-center justify-center rounded-full bg-[var(--ws-calendar-widget-text-muted)] text-[10px] font-semibold text-[var(--ws-calendar-widget-bg)]" aria-label="Tom">TO</span>
              <span class="flex size-6 items-center justify-center rounded-full bg-[var(--ws-calendar-widget-text-soft)] text-[10px] font-semibold text-[var(--ws-calendar-widget-bg)]" aria-label="Sara">SA</span>
            </div>
          </div>
        </article>

        <article class="flex gap-3 rounded-xl border-l-4 border-[var(--ws-calendar-widget-text-soft)] bg-[var(--ws-calendar-widget-border)]/40 p-3.5" role="listitem">
          <div class="shrink-0">
            <p class="text-xs font-semibold text-[var(--ws-calendar-widget-text)]">16:00</p>
            <p class="text-xs text-[var(--ws-calendar-widget-text-muted)]">16:30</p>
          </div>
          <div class="min-w-0 flex-1">
            <h3 class="text-sm font-semibold text-[var(--ws-calendar-widget-text)]">1:1 with Lisa</h3>
            <p class="mt-0.5 text-xs text-[var(--ws-calendar-widget-text-soft)]">Quarterly goals check-in</p>
          </div>
        </article>

      </div>

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