Notification Center

<!--
  Day 49: Notification Center

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

<!-- Notification Center -->
<div
  class="relative mx-auto w-full max-w-md rounded-3xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <div class="flex flex-col">
    <!-- Header -->
    <div
      class="flex items-center justify-between border-b border-zinc-100 px-4 pt-5 pb-2"
    >
      <h3 class="text-lg font-extrabold">Notifications</h3>
      <span
        class="inline-flex flex-none items-center justify-center rounded-full bg-zinc-900 px-2 py-1 text-xs font-semibold text-zinc-200"
        >5 new</span
      >
    </div>
    <!-- END Header -->

    <!-- Notifications -->
    <div>
      <!-- Notification Item -->
      <div class="flex items-start gap-3 p-4 hover:bg-zinc-50">
        <div class="flex-none">
          <div
            class="flex size-9 items-center justify-center rounded-full bg-pink-100 text-pink-600"
          >
            <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>
          </div>
        </div>
        <div class="grow">
          <p class="text-sm font-medium text-zinc-900">
            New project invitation
          </p>
          <p class="mt-1 text-xs text-zinc-600">
            Sarah invited you to join "Website Redesign"
          </p>
          <div class="mt-2 flex items-center gap-2">
            <button
              class="rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-white hover:bg-zinc-700"
            >
              Accept
            </button>
            <button
              class="rounded-md bg-zinc-100 px-2 py-1 text-xs font-medium text-zinc-800 hover:bg-zinc-200"
            >
              Decline
            </button>
          </div>
        </div>
        <span class="flex-none text-xs font-medium text-zinc-400">2m ago</span>
      </div>
      <!-- END Notification Item -->

      <!-- Notification Item -->
      <div class="flex items-start gap-3 p-4 hover:bg-zinc-50">
        <div class="flex-none">
          <div
            class="flex size-9 items-center justify-center rounded-full bg-amber-100 text-amber-600"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-exclamation-circle inline-block size-4"
            >
              <path
                fill-rule="evenodd"
                d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
        </div>
        <div class="grow">
          <p class="text-sm font-medium text-zinc-900">
            Task deadline approaching
          </p>
          <p class="mt-1 text-xs text-zinc-600">"Q4 Report" is due in 2 days</p>
        </div>
        <span class="flex-none text-xs font-medium text-zinc-400">1h ago</span>
      </div>
      <!-- END Notification Item -->

      <!-- Notification Item -->
      <div class="flex items-start gap-3 p-4 hover:bg-zinc-50">
        <div class="flex-none">
          <div
            class="flex size-9 items-center justify-center rounded-full bg-purple-100 text-purple-600"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-chart-bar inline-block size-4"
            >
              <path
                d="M12 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-1ZM6.5 6a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V6ZM2 9a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9Z"
              />
            </svg>
          </div>
        </div>
        <div class="grow">
          <p class="text-sm font-medium text-zinc-900">Analytics update</p>
          <p class="mt-1 text-xs text-zinc-600">
            Your website traffic increased by 24% this week
          </p>
        </div>
        <span class="flex-none text-xs font-medium text-zinc-400">5h ago</span>
      </div>
      <!-- END Notification Item -->

      <!-- Notification Item -->
      <div class="flex items-start gap-3 p-4 hover:bg-zinc-50">
        <div class="flex-none">
          <div
            class="flex size-9 items-center justify-center rounded-full bg-emerald-100 text-emerald-600"
          >
            <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>
        </div>
        <div class="grow">
          <p class="text-sm font-medium text-zinc-900">Project completed</p>
          <p class="mt-1 text-xs text-zinc-600">
            "Marketing Campaign" has been marked as complete
          </p>
        </div>
        <span class="flex-none text-xs font-medium text-zinc-400">12h ago</span>
      </div>
      <!-- END Notification Item -->

      <!-- Notification Item -->
      <div class="flex items-start gap-3 p-4 hover:bg-zinc-50">
        <div class="flex-none">
          <div
            class="flex size-9 items-center justify-center rounded-full bg-blue-100 text-blue-600"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-envelope-open inline-block size-4"
            >
              <path
                fill-rule="evenodd"
                d="M1.756 4.568A1.5 1.5 0 0 0 1 5.871V12.5A1.5 1.5 0 0 0 2.5 14h11a1.5 1.5 0 0 0 1.5-1.5V5.87a1.5 1.5 0 0 0-.756-1.302l-5.5-3.143a1.5 1.5 0 0 0-1.488 0l-5.5 3.143Zm1.82 2.963a.75.75 0 0 0-.653 1.35l4.1 1.98a2.25 2.25 0 0 0 1.955 0l4.1-1.98a.75.75 0 1 0-.653-1.35L8.326 9.51a.75.75 0 0 1-.652 0L3.575 7.53Z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
        </div>
        <div class="grow">
          <p class="text-sm font-medium text-zinc-900">New message</p>
          <p class="mt-1 text-xs text-zinc-600">
            Alex sent you a message about the client presentation
          </p>
        </div>
        <span class="flex-none text-xs font-medium text-zinc-400">1d ago</span>
      </div>
      <!-- END Notification Item -->
    </div>
    <!-- END Notifications -->

    <!-- Footer -->
    <div class="flex items-center justify-center border-t border-zinc-100 p-4">
      <button
        type="button"
        class="flex w-full items-center justify-center gap-2 rounded-xl border border-zinc-100 bg-zinc-100 px-4 py-3 text-sm leading-5 font-medium text-zinc-900 hover:border-zinc-200 hover:bg-zinc-200 hover:text-zinc-950 focus:ring-2 focus:ring-zinc-500/20 focus:outline-hidden active:border-zinc-100 active:bg-zinc-100"
      >
        View all notifications
      </button>
    </div>
    <!-- END Footer -->
  </div>
</div>
<!-- END Notification Center -->