<ul role="list" class="m-8 max-w-screen-md">
  <li class="group relative flex flex-col pb-8 pl-7 last:pb-0">
    <div class="absolute bottom-0 left-[calc(0.25rem-0.5px)] top-0 w-px bg-white/10 group-first:top-3"></div>
    <div class="absolute left-0 top-2 h-2 w-2 rounded-full border border-sky-300 bg-zinc-950"></div>
    <h3 class="mt-2 text-sm/6 font-semibold text-white">Opening reception</h3>
    <p class="font-display text-2xs/6 order-first font-semibold tracking-[0.2em] text-sky-300">
      <time datetime="2023-06-20T17:30-04:00"
        >5:30<!-- -->
        PM</time
      >
      <!-- -->-<!-- -->
      <time datetime="2023-06-20T18:30-04:00"
        >6:30<!-- -->
        PM</time
      >
    </p>
    <p class="mt-0.5 text-sm/6 text-zinc-400">Settle in, grab some swag, and enjoy a drink with other members of the community before the keynote.</p>
  </li>
  <li class="group relative flex flex-col pb-8 pl-7 last:pb-0">
    <div class="absolute bottom-0 left-[calc(0.25rem-0.5px)] top-0 w-px bg-white/10 group-first:top-3"></div>
    <div class="absolute left-0 top-2 h-2 w-2 rounded-full border border-sky-300 bg-zinc-950"></div>
    <h3 class="mt-2 text-sm/6 font-semibold text-white">Keynote presentation + demos</h3>
    <p class="font-display text-2xs/6 order-first font-semibold tracking-[0.2em] text-sky-300">
      <time datetime="2023-06-20T18:30-04:00"
        >6:30<!-- -->
        PM</time
      >
      <!-- -->-<!-- -->
      <time datetime="2023-06-20T20:00-04:00"
        >8:00<!-- -->
        PM</time
      >
    </p>
    <p class="mt-0.5 text-sm/6 text-zinc-400">Featuring a keynote presentation from Adam Wathan and live demos from community members like Sam Selikoff.</p>
  </li>
  <li class="group relative flex flex-col pb-8 pl-7 last:pb-0">
    <div class="absolute bottom-0 left-[calc(0.25rem-0.5px)] top-0 w-px bg-white/10 group-first:top-3"></div>
    <div class="absolute left-0 top-2 h-2 w-2 rounded-full border border-sky-300 bg-zinc-950"></div>
    <h3 class="mt-2 text-sm/6 font-semibold text-white">Evening social</h3>
    <p class="font-display text-2xs/6 order-first font-semibold tracking-[0.2em] text-sky-300">
      <time datetime="2023-06-20T20:00-04:00"
        >8:00<!-- -->
        PM</time
      >
      <!-- -->-<!-- -->
      <time datetime="2023-06-20T23:00-04:00"
        >11:00<!-- -->
        PM</time
      >
    </p>
    <p class="mt-0.5 text-sm/6 text-zinc-400">Spend the rest of the evening making connections with other community members over canapés, snacks, and refreshments.</p>
  </li>
</ul>