Day 11
Kanban Board List

<!--
  Day 11: Kanban board 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
-->

<!-- Kanban Board List -->
<div
  class="relative mx-auto grid w-full max-w-sm grid-cols-1 gap-4 rounded-3xl bg-white/40 p-4 shadow-sm shadow-slate-300 backdrop-blur-xs"
>
  <!-- Todo -->
  <div class="flex-none">
    <!-- Todo Heading -->
    <div class="mb-4 flex items-center justify-between gap-2">
      <h2 class="font-semibold">Todo</h2>
      <div class="flex items-center gap-2">
        <button
          type="button"
          class="group inline-flex size-8 items-center justify-center rounded-full border border-dashed border-slate-300 text-slate-400 hover:border-slate-500 hover:text-slate-950 active:border-slate-400"
        >
          <svg
            class="hi-mini hi-plus inline-block size-5 transition group-active:scale-90"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
            ></path>
          </svg>
        </button>
        <button
          type="button"
          class="group inline-flex size-8 items-center justify-center rounded-full border border-dashed border-slate-300 text-slate-400 hover:border-slate-500 hover:text-slate-950 active:border-slate-400"
        >
          <svg
            class="hi-mini hi-pencil-square inline-block size-5 transition group-active:scale-90"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
            ></path>
            <path
              d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
            ></path>
          </svg>
        </button>
      </div>
    </div>
    <!-- END Todo Heading -->

    <!-- Todo List -->
    <div class="flex flex-col gap-4">
      <!-- Card 1 Container -->
      <div class="relative">
        <!-- Action -->
        <div class="absolute top-4 right-4">
          <button
            type="button"
            class="flex size-6 items-center justify-center text-slate-400 hover:text-slate-600 active:text-slate-400"
            aria-expanded="false"
          >
            <svg
              class="hi-mini hi-ellipsis-vertical inline-block size-5"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z"
              ></path>
            </svg>
          </button>
        </div>
        <!-- END Action -->

        <!-- Card 1 -->
        <a
          href="javascript:void(0)"
          class="group flex flex-col gap-3 rounded-xl bg-white p-4 text-sm transition hover:shadow-lg hover:shadow-slate-200"
        >
          <div class="-ml-1.5 flex grow flex-wrap gap-1 pr-6">
            <span
              class="rounded-xl bg-rose-50 px-1.5 py-px font-medium text-rose-600"
              >brand</span
            >
            <span
              class="rounded-xl bg-blue-50 px-1.5 py-px font-medium text-blue-600"
              >design</span
            >
          </div>
          <div>
            <h3 class="mb-1 font-bold">New logo design</h3>
            <p class="line-clamp-3 text-slate-500">
              We have to re-evalute our brand message and come up with a clean
              and modern design.
            </p>
          </div>
          <div class="flex items-center justify-between">
            <div class="inline-flex items-center gap-1.5 text-slate-500">
              <svg
                class="hi-mini hi-calendar-days inline-block size-5 text-slate-300"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z"
                ></path>
                <path
                  fill-rule="evenodd"
                  d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
                  clip-rule="evenodd"
                ></path>
              </svg>
              <span>October 1st</span>
            </div>
            <div class="inline-flex items-center gap-1.5 text-slate-500">
              <svg
                class="hi-mini hi-clock inline-block size-5 text-slate-300"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z"
                  clip-rule="evenodd"
                ></path>
              </svg>
              <span>14:00</span>
            </div>
          </div>
        </a>
        <!-- END Card 1 -->
      </div>
      <!-- END Card 1 Container -->

      <!-- Card 2 Container -->
      <div class="relative">
        <!-- Action -->
        <div class="absolute top-4 right-4">
          <button
            type="button"
            class="flex size-6 items-center justify-center text-slate-400 hover:text-slate-600 active:text-slate-400"
            aria-expanded="false"
          >
            <svg
              class="hi-mini hi-ellipsis-vertical inline-block size-5"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z"
              ></path>
            </svg>
          </button>
        </div>
        <!-- END Action -->

        <!-- Card 2 -->
        <a
          href="javascript:void(0)"
          class="group flex flex-col gap-3 rounded-xl bg-white p-4 text-sm transition hover:shadow-lg hover:shadow-slate-200"
        >
          <div class="-ml-1.5 flex grow flex-wrap gap-1 pr-6">
            <span
              class="rounded-xl bg-rose-50 px-1.5 py-px font-medium text-rose-600"
              >brand</span
            >
            <span
              class="rounded-xl bg-blue-50 px-1.5 py-px font-medium text-blue-600"
              >design</span
            >
            <span
              class="rounded-xl bg-emerald-50 px-1.5 py-px font-medium text-emerald-600"
              >development</span
            >
          </div>
          <div>
            <h3 class="mb-1 font-bold">Build mobile application</h3>
            <p class="line-clamp-3 text-slate-500">
              We must come up with a cool design
            </p>
          </div>
          <div class="flex items-center justify-between">
            <div class="inline-flex items-center gap-1.5 text-slate-500">
              <svg
                class="hi-mini hi-calendar-days inline-block size-5 text-slate-300"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z"
                ></path>
                <path
                  fill-rule="evenodd"
                  d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
                  clip-rule="evenodd"
                ></path>
              </svg>
              <span>November 10th</span>
            </div>
            <div class="inline-flex items-center gap-1.5 text-slate-500">
              <svg
                class="hi-mini hi-clock inline-block size-5 text-slate-300"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z"
                  clip-rule="evenodd"
                ></path>
              </svg>
              <span>18:00</span>
            </div>
          </div>
        </a>
        <!-- END Card 2 -->
      </div>
      <!-- END Card 2 Container -->

      <!-- Card 3 Container -->
      <div class="relative">
        <!-- Action -->
        <div class="absolute top-4 right-4">
          <button
            type="button"
            class="flex size-6 items-center justify-center text-slate-400 hover:text-slate-600 active:text-slate-400"
            aria-expanded="false"
          >
            <svg
              class="hi-mini hi-ellipsis-vertical inline-block size-5"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z"
              ></path>
            </svg>
          </button>
        </div>
        <!-- END Action -->

        <!-- Card 3 -->
        <a
          href="javascript:void(0)"
          class="group flex flex-col gap-3 rounded-xl bg-white p-4 text-sm transition hover:shadow-lg hover:shadow-slate-200"
        >
          <div class="-ml-1.5 flex grow flex-wrap gap-1 pr-6">
            <span
              class="rounded-xl bg-blue-50 px-1.5 py-px font-medium text-blue-600"
              >design</span
            >
            <span
              class="rounded-xl bg-emerald-50 px-1.5 py-px font-medium text-emerald-600"
              >development</span
            >
          </div>
          <div>
            <h3 class="mb-1 font-bold">Website implementation</h3>
            <p class="line-clamp-3 text-slate-500">
              We are starting with the basic idea and move forward. It needs to
              be ready in a couple of months, so let's get started.
            </p>
          </div>
          <div class="flex items-center justify-between">
            <div class="inline-flex items-center gap-1.5 text-slate-500">
              <svg
                class="hi-mini hi-calendar-days inline-block size-5 text-slate-300"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z"
                ></path>
                <path
                  fill-rule="evenodd"
                  d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
                  clip-rule="evenodd"
                ></path>
              </svg>
              <span>November 20th</span>
            </div>
            <div class="inline-flex items-center gap-1.5 text-slate-500">
              <svg
                class="hi-mini hi-clock inline-block size-5 text-slate-300"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z"
                  clip-rule="evenodd"
                ></path>
              </svg>
              <span>10:00</span>
            </div>
          </div>
        </a>
        <!-- END Card 3 -->
      </div>
      <!-- END Card 3 Container -->
    </div>
    <!-- END Todo List -->
  </div>
</div>
<!-- END Kanban Board List -->
Kanban Board List

More code snippets will keep coming, so stay tuned!

Follow John on X for any upcoming updates but also be sure to subscribe to our newsletter to receive them first! 🔥
