Calendar Event List

<!--
  Day 97: Calendar Event List

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Calendar Event List -->
<div
  class="relative mx-auto w-full max-w-lg rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
  <div class="flex flex-col gap-4">
    <!-- Date Header -->
    <div class="pt-2.5 text-center">
      <h2 class="text-lg font-bold text-zinc-900">Today</h2>
      <p class="text-sm text-zinc-600">September 1, 2025</p>
    </div>
    <!-- END Date Header -->

    <!-- Calendar Events -->
    <div class="flex flex-col gap-2.5">
      <!-- Event -->
      <div class="relative rounded-xl bg-white/90 py-4 pr-4 pl-10">
        <div
          aria-hidden="true"
          class="absolute inset-y-4 left-4 w-2 flex-none rounded-full bg-indigo-500"
        ></div>
        <div>
          <p class="text-sm font-medium text-zinc-950">Team Standup</p>
          <p class="mt-1 text-xs text-zinc-500">9:00 AM - 9:30 AM</p>
        </div>
      </div>
      <!-- END Event -->

      <!-- Event -->
      <div class="relative rounded-xl bg-white/90 py-4 pr-4 pl-10">
        <div
          aria-hidden="true"
          class="absolute inset-y-4 left-4 w-2 flex-none rounded-full bg-emerald-500"
        ></div>
        <div>
          <p class="text-sm font-medium text-zinc-950">Client Presentation</p>
          <p class="mt-1 text-xs text-zinc-500">2:00 PM - 3:00 PM</p>
        </div>
      </div>
      <!-- END Event -->

      <!-- Event -->
      <div class="relative rounded-xl bg-white/90 py-4 pr-4 pl-10">
        <div
          aria-hidden="true"
          class="absolute inset-y-4 left-4 w-2 flex-none rounded-full bg-amber-500"
        ></div>
        <div>
          <p class="text-sm font-medium text-zinc-950">Project Review</p>
          <p class="mt-1 text-xs text-zinc-500">4:30 PM - 5:30 PM</p>
        </div>
      </div>
      <!-- END Event -->

      <!-- Event -->
      <div class="relative rounded-xl bg-white/90 py-4 pr-4 pl-10">
        <div
          aria-hidden="true"
          class="absolute inset-y-4 left-4 w-2 flex-none rounded-full bg-rose-500"
        ></div>
        <div>
          <p class="text-sm font-medium text-zinc-950">Deadline: Q4 Report</p>
          <p class="mt-1 text-xs text-zinc-500">11:59 PM</p>
        </div>
      </div>
      <!-- END Event -->
    </div>
    <!-- END Calendar Events -->
  </div>
</div>
<!-- END Calendar Event List -->