Task Management Card

<!--
  Day 103: Task Management Card

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

<!-- Task Management Card -->
<div
  class="relative mx-auto w-full max-w-sm rounded-3xl border border-zinc-200 bg-white p-6 ring-4 ring-zinc-300/25"
>
  <!-- Card Header -->
  <div class="flex items-center justify-between">
    <h3 class="text-lg font-bold text-zinc-900">Today's Tasks</h3>
    <span
      class="inline-flex items-center rounded-full bg-indigo-100 px-3 py-1 text-xs font-medium text-indigo-700"
    >
      3 left
    </span>
  </div>
  <!-- END Card Header -->

  <hr class="my-4 border-dashed border-zinc-200" />

  <!-- Progress Bar -->
  <div
    role="progressbar"
    aria-valuenow="5"
    aria-valuemin="0"
    aria-valuemax="8"
    aria-labelledby="progress-label"
    aria-describedby="progress-description"
  >
    <div class="flex items-center justify-between text-sm">
      <span id="progress-label" class="font-semibold text-zinc-700"
        >Progress</span
      >
      <span id="progress-description" class="text-zinc-600"
        >5 of 8 completed</span
      >
    </div>
    <div class="mt-2 h-2 w-full rounded-full bg-zinc-200">
      <div class="h-2 rounded-full bg-indigo-500" style="width: 62.5%"></div>
    </div>
  </div>
  <!-- END Progress Bar -->

  <!-- Task List -->
  <div class="mt-6 flex flex-col gap-3">
    <!-- Active Task -->
    <div
      class="group flex items-center gap-3 rounded-xl bg-white p-3 hover:bg-zinc-50"
    >
      <div
        class="flex size-5 flex-none items-center justify-center rounded-full border border-zinc-300 hover:border-zinc-500"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-check hidden size-4 group-hover:inline-block"
        >
          <path
            fill-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <span class="grow text-sm font-medium text-zinc-900"
        >Prepare client presentation</span
      >
      <span
        class="rounded-full bg-orange-100 px-2 py-1 text-xs font-medium text-orange-700"
      >
        High
      </span>
    </div>
    <!-- END Active Task -->

    <!-- Pending Task -->
    <div
      class="group flex items-center gap-3 rounded-xl bg-white p-3 hover:bg-zinc-50"
    >
      <div
        class="flex size-5 flex-none items-center justify-center rounded-full border border-zinc-300 hover:border-zinc-500"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-check hidden size-4 group-hover:inline-block"
        >
          <path
            fill-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <span class="grow text-sm text-zinc-700">Schedule team meeting</span>
      <span class="text-xs text-zinc-500">2:00 PM</span>
    </div>
    <!-- END Pending Task -->

    <!-- Another Pending Task -->
    <div
      class="group flex items-center gap-3 rounded-xl bg-white p-3 hover:bg-zinc-50"
    >
      <div
        class="flex size-5 flex-none items-center justify-center rounded-full border border-zinc-300 hover:border-zinc-500"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-check hidden size-4 group-hover:inline-block"
        >
          <path
            fill-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <span class="grow text-sm text-zinc-700"
        >Update project documentation</span
      >
      <span
        class="rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700"
      >
        Medium
      </span>
    </div>
    <!-- END Another Pending Task -->

    <!-- Completed Task -->
    <div class="group flex items-center gap-3 rounded-xl bg-zinc-50 p-3">
      <div
        class="flex size-5 items-center justify-center rounded-full bg-indigo-500 text-white"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-check inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <span class="grow text-sm text-zinc-500 line-through"
        >Review quarterly reports</span
      >
    </div>
    <!-- END Completed Task -->
  </div>
  <!-- END Task List -->

  <!-- Action Button -->
  <button
    type="button"
    class="mt-6 flex w-full items-center justify-center gap-2 rounded-lg border border-indigo-600 bg-indigo-600 px-6 py-2.5 text-sm font-medium text-white hover:border-indigo-700 hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/50 focus:ring-offset-2 focus:outline-none active:border-indigo-800 active:bg-indigo-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"
    >
      <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>Add new task</span>
  </button>
</div>
<!-- END Task Management Card -->