Upcoming Events List

<!--
  Day 117: Upcoming events 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
-->

<!-- Upcoming Events List -->
<div
  class="mx-auto w-full max-w-md rounded-3xl bg-white p-6 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
>
  <!-- Header -->
  <div class="flex items-center justify-between">
    <div>
      <h3 class="text-lg font-bold text-zinc-900">Upcoming</h3>
      <p class="text-xs text-zinc-500">Next 7 days</p>
    </div>
    <button
      type="button"
      class="inline-flex items-center gap-1.5 rounded-lg bg-zinc-900 px-2.5 py-1.75 text-sm font-medium text-white hover:bg-zinc-700 active:bg-zinc-800"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        class="hi-micro hi-plus inline-block size-4 opacity-75"
      >
        <path
          d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
        />
      </svg>
      <span>New</span>
    </button>
  </div>
  <!-- END Header -->

  <!-- Day Group -->
  <div class="mt-6">
    <div class="flex items-center gap-3">
      <span class="text-xs font-semibold tracking-wide text-zinc-400 uppercase"
        >Today</span
      >
      <span class="h-px grow bg-zinc-100"></span>
      <span class="text-xs text-zinc-400">Apr 27</span>
    </div>

    <ul class="mt-3 flex flex-col gap-2.5">
      <!-- Event -->
      <li
        class="group flex items-stretch gap-3 rounded-2xl border border-zinc-100 bg-white p-3 hover:border-zinc-200 hover:bg-zinc-50/60"
      >
        <div class="w-1 flex-none rounded-full bg-indigo-500"></div>
        <div class="min-w-0 grow">
          <div class="flex items-center justify-between gap-3">
            <p class="truncate text-sm font-semibold text-zinc-900">
              Design review with Maya
            </p>
            <span
              class="flex-none rounded-md bg-indigo-50 px-1.5 py-0.5 text-xs font-medium text-indigo-700"
              >Now</span
            >
          </div>
          <div class="mt-1 flex items-center gap-3 text-xs text-zinc-500">
            <span class="inline-flex items-center gap-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 16 16"
                fill="currentColor"
                class="hi-micro hi-clock inline-block size-3.5"
              >
                <path
                  fill-rule="evenodd"
                  d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-6-3.25a.75.75 0 0 0-1.5 0v3.5c0 .414.336.75.75.75h3a.75.75 0 0 0 0-1.5H9V4.75Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span>2:00 - 2:45 PM</span>
            </span>
            <span class="inline-flex items-center gap-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 16 16"
                fill="currentColor"
                class="hi-micro hi-video-camera inline-block size-3.5"
              >
                <path
                  d="M3.25 4A2.25 2.25 0 0 0 1 6.25v3.5A2.25 2.25 0 0 0 3.25 12h6.5A2.25 2.25 0 0 0 12 9.75v-3.5A2.25 2.25 0 0 0 9.75 4h-6.5ZM14.25 4.553a.75.75 0 0 0-1.06-.013l-1 .9a.75.75 0 0 0-.19.501v4.118a.75.75 0 0 0 .19.502l1 .9a.75.75 0 0 0 1.06-.014.75.75 0 0 0 .25-.56V5.113a.75.75 0 0 0-.25-.56Z"
                />
              </svg>
              <span>Google Meet</span>
            </span>
          </div>
        </div>
      </li>
      <!-- END Event -->

      <!-- Event -->
      <li
        class="group flex items-stretch gap-3 rounded-2xl border border-zinc-100 bg-white p-3 hover:border-zinc-200 hover:bg-zinc-50/60"
      >
        <div class="w-1 flex-none rounded-full bg-emerald-500"></div>
        <div class="min-w-0 grow">
          <div class="flex items-center justify-between gap-3">
            <p class="truncate text-sm font-semibold text-zinc-900">
              Sprint planning
            </p>
            <span class="flex-none text-xs font-medium text-zinc-400"
              >4:30 PM</span
            >
          </div>
          <div class="mt-1 flex items-center gap-3 text-xs text-zinc-500">
            <span class="inline-flex items-center gap-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 16 16"
                fill="currentColor"
                class="hi-micro hi-clock inline-block size-3.5"
              >
                <path
                  fill-rule="evenodd"
                  d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-6-3.25a.75.75 0 0 0-1.5 0v3.5c0 .414.336.75.75.75h3a.75.75 0 0 0 0-1.5H9V4.75Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span>4:30 - 5:30 PM</span>
            </span>
            <div class="flex -space-x-1.5">
              <span
                class="inline-flex size-5 items-center justify-center rounded-full bg-emerald-100 text-[10px] font-semibold text-emerald-700 ring-2 ring-white"
                >MK</span
              >
              <span
                class="inline-flex size-5 items-center justify-center rounded-full bg-indigo-100 text-[10px] font-semibold text-indigo-700 ring-2 ring-white"
                >RB</span
              >
              <span
                class="inline-flex size-5 items-center justify-center rounded-full bg-amber-100 text-[10px] font-semibold text-amber-700 ring-2 ring-white"
                >+3</span
              >
            </div>
          </div>
        </div>
      </li>
      <!-- END Event -->
    </ul>
  </div>
  <!-- END Day Group -->

  <!-- Day Group -->
  <div class="mt-6">
    <div class="flex items-center gap-3">
      <span class="text-xs font-semibold tracking-wide text-zinc-400 uppercase"
        >Tomorrow</span
      >
      <span class="h-px grow bg-zinc-100"></span>
      <span class="text-xs text-zinc-400">Apr 28</span>
    </div>

    <ul class="mt-3 flex flex-col gap-2.5">
      <!-- Event -->
      <li
        class="group flex items-stretch gap-3 rounded-2xl border border-zinc-100 bg-white p-3 hover:border-zinc-200 hover:bg-zinc-50/60"
      >
        <div class="w-1 flex-none rounded-full bg-rose-500"></div>
        <div class="min-w-0 grow">
          <div class="flex items-center justify-between gap-3">
            <p class="truncate text-sm font-semibold text-zinc-900">
              Quarterly board meeting
            </p>
            <span class="flex-none text-xs font-medium text-zinc-400"
              >9:00 AM</span
            >
          </div>
          <div class="mt-1 flex items-center gap-3 text-xs text-zinc-500">
            <span class="inline-flex items-center gap-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 16 16"
                fill="currentColor"
                class="hi-micro hi-map-pin inline-block size-3.5"
              >
                <path
                  fill-rule="evenodd"
                  d="m7.539 14.841.003.003.002.002a.755.755 0 0 0 .912 0l.002-.002.003-.003.012-.009a5.57 5.57 0 0 0 .19-.153 15.588 15.588 0 0 0 2.046-2.083c1.101-1.362 2.291-3.342 2.291-5.296A5 5 0 0 0 3 7.3c0 1.954 1.19 3.934 2.291 5.296a15.586 15.586 0 0 0 2.236 2.236l.012.009ZM8 8.75a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span>HQ Conference Room</span>
            </span>
          </div>
        </div>
      </li>
      <!-- END Event -->

      <!-- Event -->
      <li
        class="group flex items-stretch gap-3 rounded-2xl border border-zinc-100 bg-white p-3 hover:border-zinc-200 hover:bg-zinc-50/60"
      >
        <div class="w-1 flex-none rounded-full bg-amber-500"></div>
        <div class="min-w-0 grow">
          <div class="flex items-center justify-between gap-3">
            <p class="truncate text-sm font-semibold text-zinc-900">
              Coffee with Daniel
            </p>
            <span class="flex-none text-xs font-medium text-zinc-400"
              >11:30 AM</span
            >
          </div>
          <div class="mt-1 flex items-center gap-3 text-xs text-zinc-500">
            <span class="inline-flex items-center gap-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 16 16"
                fill="currentColor"
                class="hi-micro hi-clock inline-block size-3.5"
              >
                <path
                  fill-rule="evenodd"
                  d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-6-3.25a.75.75 0 0 0-1.5 0v3.5c0 .414.336.75.75.75h3a.75.75 0 0 0 0-1.5H9V4.75Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span>30 min</span>
            </span>
            <span class="inline-flex items-center gap-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 16 16"
                fill="currentColor"
                class="hi-micro hi-map-pin inline-block size-3.5"
              >
                <path
                  fill-rule="evenodd"
                  d="m7.539 14.841.003.003.002.002a.755.755 0 0 0 .912 0l.002-.002.003-.003.012-.009a5.57 5.57 0 0 0 .19-.153 15.588 15.588 0 0 0 2.046-2.083c1.101-1.362 2.291-3.342 2.291-5.296A5 5 0 0 0 3 7.3c0 1.954 1.19 3.934 2.291 5.296a15.586 15.586 0 0 0 2.236 2.236l.012.009ZM8 8.75a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span>Blue Bottle</span>
            </span>
          </div>
        </div>
      </li>
      <!-- END Event -->
    </ul>
  </div>
  <!-- END Day Group -->

  <!-- Footer -->
  <div class="mt-6 border-t border-dashed border-zinc-200 pt-4 text-center">
    <a
      href="javascript:void(0)"
      class="inline-flex items-center gap-1 text-xs font-semibold text-zinc-700 hover:text-indigo-600"
    >
      <span>View full calendar</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        class="hi-micro hi-arrow-right inline-block size-3.5"
      >
        <path
          fill-rule="evenodd"
          d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
          clip-rule="evenodd"
        />
      </svg>
    </a>
  </div>
  <!-- END Footer -->
</div>
<!-- END Upcoming Events List -->