Kanban Board List 2

<!--
  Day 106: Kanban Board List 2

  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
-->

<!-- Kanban Board List 2 -->
<div
  class="relative mx-auto w-full max-w-md rounded-3xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <!-- Column -->
  <div class="rounded-3xl bg-zinc-100 p-4 sm:p-5">
    <!-- Column Header -->
    <div class="mb-4 flex items-center justify-between">
      <h3 class="text-lg font-bold text-zinc-900">Travel Plans</h3>
      <span
        class="flex size-6 items-center justify-center rounded-full bg-zinc-200 text-xs font-medium text-zinc-700"
      >
        3
      </span>
    </div>
    <!-- END Column Header -->

    <!-- Cards -->
    <div class="flex flex-col gap-4">
      <!-- Card 1 -->
      <a
        href="javascript:void(0)"
        class="group rounded-xl bg-white p-4 shadow-sm hover:shadow-md active:opacity-75 active:shadow-sm"
      >
        <div class="mb-1 flex items-start justify-between gap-1">
          <h4 class="font-semibold text-zinc-900">Book Flight to Tokyo</h4>
          <span
            class="rounded bg-rose-100 px-2 py-1 text-xs font-medium text-rose-700"
          >
            High Priority
          </span>
        </div>
        <p class="mb-3 text-sm text-zinc-600">
          Research and book round-trip flights for cherry blossom season in
          April.
        </p>
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-1">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-calendar inline-block size-4 text-zinc-400"
            >
              <path
                fill-rule="evenodd"
                d="M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="text-xs font-medium text-zinc-500">Due: Mar 15</span>
          </div>
          <div class="flex -space-x-2">
            <img
              src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=80&h=80&auto=format&fit=crop"
              alt="Avatar"
              class="size-6 rounded-full border-2 border-white"
            />
          </div>
        </div>
      </a>
      <!-- END Card 1 -->

      <!-- Card 2 -->
      <a
        href="javascript:void(0)"
        class="group rounded-xl bg-white p-4 shadow-sm hover:shadow-md active:opacity-75 active:shadow-sm"
      >
        <div class="mb-1 flex items-start justify-between gap-1">
          <h4 class="font-semibold text-zinc-900">Reserve Hotel in Paris</h4>
          <span
            class="rounded bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700"
          >
            Medium
          </span>
        </div>
        <p class="mb-3 text-sm text-zinc-600">
          Find accommodation near the Eiffel Tower for 5-night stay.
        </p>
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-1">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-calendar inline-block size-4 text-zinc-400"
            >
              <path
                fill-rule="evenodd"
                d="M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="text-xs font-medium text-zinc-500">Due: Apr 1</span>
          </div>
          <div class="flex -space-x-2">
            <img
              src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=80&h=80&auto=format&fit=crop"
              alt="Avatar"
              class="size-6 rounded-full border-2 border-white"
            />
            <img
              src="https://images.unsplash.com/photo-1504257432389-52343af06ae3?q=80&w=80&h=80&auto=format&fit=crop"
              alt="Avatar"
              class="size-6 rounded-full border-2 border-white"
            />
          </div>
        </div>
      </a>
      <!-- END Card 2 -->

      <!-- Card 3 -->
      <a
        href="javascript:void(0)"
        class="group rounded-xl bg-white p-4 shadow-sm hover:shadow-md active:opacity-75 active:shadow-sm"
      >
        <div class="mb-1 flex items-start justify-between gap-1">
          <h4 class="font-semibold text-zinc-900">Plan Bali Itinerary</h4>
          <span
            class="rounded bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700"
          >
            Low Priority
          </span>
        </div>
        <p class="mb-3 text-sm text-zinc-600">
          Create day-by-day schedule for temples, beaches, and local
          experiences.
        </p>
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-1">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-calendar inline-block size-4 text-zinc-400"
            >
              <path
                fill-rule="evenodd"
                d="M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="text-xs font-medium text-zinc-500">Due: May 10</span>
          </div>
          <div class="flex -space-x-2">
            <img
              src="https://images.unsplash.com/photo-1614204424926-196a80bf0be8?q=80&w=80&h=80&auto=format&fit=crop"
              alt="Avatar"
              class="size-6 rounded-full border-2 border-white"
            />
          </div>
        </div>
      </a>
      <!-- END Card 3 -->
    </div>
    <!-- END Cards -->
  </div>
  <!-- END Column -->
</div>
<!-- END Kanban Board List 2 -->