Upcoming Events List

<!--
  A list, so it uses <ul>/<li> and each row is a single link - the whole row is
  the target, not a tiny hotspot. The date badge is a fixed 44px so titles align
  and can truncate instead of wrapping the badge. Coloured dots are decorative
  (aria-hidden); the title carries the meaning.
-->
<div class="w-full max-w-sm rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
  <h2 class="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">Upcoming</h2>
  <ul class="space-y-2">
      <li>
        <a href="#" class="flex items-center gap-3 rounded-xl border border-gray-100 px-3 py-2.5 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:transition-none dark:border-gray-800 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">
          <span class="flex w-11 shrink-0 flex-col items-center rounded-lg bg-gray-50 py-1 dark:bg-gray-800">
            <span class="text-[0.6rem] font-medium uppercase text-gray-500 dark:text-gray-400">Fri</span>
            <span class="text-base font-semibold tabular-nums text-gray-900 dark:text-gray-100">17</span>
          </span>
          <span class="min-w-0 flex-1">
            <span class="flex items-center gap-1.5">
              <span class="h-2 w-2 shrink-0 rounded-full bg-blue-500" aria-hidden="true"></span>
              <span class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">Design review</span>
            </span>
            <span class="mt-0.5 block text-xs text-gray-500 dark:text-gray-400">11:00 AM</span>
          </span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center gap-3 rounded-xl border border-gray-100 px-3 py-2.5 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:transition-none dark:border-gray-800 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">
          <span class="flex w-11 shrink-0 flex-col items-center rounded-lg bg-gray-50 py-1 dark:bg-gray-800">
            <span class="text-[0.6rem] font-medium uppercase text-gray-500 dark:text-gray-400">Sat</span>
            <span class="text-base font-semibold tabular-nums text-gray-900 dark:text-gray-100">18</span>
          </span>
          <span class="min-w-0 flex-1">
            <span class="flex items-center gap-1.5">
              <span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500" aria-hidden="true"></span>
              <span class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">Team offsite</span>
            </span>
            <span class="mt-0.5 block text-xs text-gray-500 dark:text-gray-400">All day</span>
          </span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center gap-3 rounded-xl border border-gray-100 px-3 py-2.5 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:transition-none dark:border-gray-800 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">
          <span class="flex w-11 shrink-0 flex-col items-center rounded-lg bg-gray-50 py-1 dark:bg-gray-800">
            <span class="text-[0.6rem] font-medium uppercase text-gray-500 dark:text-gray-400">Tue</span>
            <span class="text-base font-semibold tabular-nums text-gray-900 dark:text-gray-100">21</span>
          </span>
          <span class="min-w-0 flex-1">
            <span class="flex items-center gap-1.5">
              <span class="h-2 w-2 shrink-0 rounded-full bg-violet-500" aria-hidden="true"></span>
              <span class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">Product launch</span>
            </span>
            <span class="mt-0.5 block text-xs text-gray-500 dark:text-gray-400">3:00 PM</span>
          </span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center gap-3 rounded-xl border border-gray-100 px-3 py-2.5 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:transition-none dark:border-gray-800 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">
          <span class="flex w-11 shrink-0 flex-col items-center rounded-lg bg-gray-50 py-1 dark:bg-gray-800">
            <span class="text-[0.6rem] font-medium uppercase text-gray-500 dark:text-gray-400">Fri</span>
            <span class="text-base font-semibold tabular-nums text-gray-900 dark:text-gray-100">24</span>
          </span>
          <span class="min-w-0 flex-1">
            <span class="flex items-center gap-1.5">
              <span class="h-2 w-2 shrink-0 rounded-full bg-amber-500" aria-hidden="true"></span>
              <span class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">Sprint demo</span>
            </span>
            <span class="mt-0.5 block text-xs text-gray-500 dark:text-gray-400">10:00 AM</span>
          </span>
        </a>
      </li>
  </ul>
</div>