Contact List

<!--
  Day 96: Contact 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
-->

<!-- Contact List -->
<div
  class="relative mx-auto w-full max-w-lg rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
  <div class="flex flex-col gap-4">
    <!-- Search -->
    <div class="relative">
      <div class="absolute inset-y-0 left-0 flex items-center pl-3">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-magnifying-glass z-10 inline-block size-4 text-zinc-400"
        >
          <path
            fill-rule="evenodd"
            d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <input
        type="text"
        placeholder="Search contacts..."
        class="w-full rounded-xl border border-zinc-200 bg-zinc-100/50 py-2.5 pr-4 pl-10 text-sm placeholder-zinc-500 backdrop-blur-sm focus:border-zinc-500 focus:bg-white focus:ring-3 focus:ring-zinc-300 focus:outline-hidden"
      />
    </div>
    <!-- END Search -->

    <!-- Contacts List -->
    <div class="flex flex-col gap-2.5">
      <!-- Contact -->
      <div
        class="flex items-center gap-3 rounded-xl bg-white/60 p-3 backdrop-blur-sm"
      >
        <div
          class="flex size-10 flex-none items-center justify-center rounded-full bg-linear-to-br from-blue-500 to-purple-600 text-sm font-medium text-white"
        >
          JD
        </div>
        <div class="grow">
          <p class="truncate text-sm font-semibold text-zinc-900">John Doe</p>
          <p
            class="mt-0.5 max-w-28 truncate text-xs text-zinc-500 sm:max-w-full"
          >
            john@example.com
          </p>
        </div>
        <div class="flex flex-none items-center gap-2">
          <button type="button" class="text-zinc-400 hover:text-zinc-800">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              class="hi-mini hi-phone inline-block size-5"
            >
              <path
                fill-rule="evenodd"
                d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
          <button type="button" class="text-zinc-400 hover:text-zinc-800">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              class="hi-mini hi-chat-bubble-oval-left inline-block size-5"
            >
              <path
                fill-rule="evenodd"
                d="M2 10c0-3.967 3.69-7 8-7 4.31 0 8 3.033 8 7s-3.69 7-8 7a9.165 9.165 0 0 1-1.504-.123 5.976 5.976 0 0 1-3.935 1.107.75.75 0 0 1-.584-1.143 3.478 3.478 0 0 0 .522-1.756C2.979 13.825 2 12.025 2 10Z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <!-- END Contact -->

      <!-- Contact -->
      <div
        class="flex items-center gap-3 rounded-xl bg-white/60 p-3 backdrop-blur-sm"
      >
        <div
          class="flex size-10 items-center justify-center rounded-full bg-linear-to-br from-green-500 to-teal-600 text-sm font-medium text-white"
        >
          AS
        </div>
        <div class="grow">
          <p class="truncate text-sm font-semibold text-zinc-900">
            Alice Smith
          </p>
          <p
            class="mt-0.5 max-w-28 truncate text-xs text-zinc-500 sm:max-w-full"
          >
            alice.smith@company.com
          </p>
        </div>
        <div class="flex items-center gap-2">
          <button type="button" class="text-zinc-400 hover:text-zinc-800">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              class="hi-mini hi-phone inline-block size-5"
            >
              <path
                fill-rule="evenodd"
                d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
          <button type="button" class="text-zinc-400 hover:text-zinc-800">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              class="hi-mini hi-chat-bubble-oval-left inline-block size-5"
            >
              <path
                fill-rule="evenodd"
                d="M2 10c0-3.967 3.69-7 8-7 4.31 0 8 3.033 8 7s-3.69 7-8 7a9.165 9.165 0 0 1-1.504-.123 5.976 5.976 0 0 1-3.935 1.107.75.75 0 0 1-.584-1.143 3.478 3.478 0 0 0 .522-1.756C2.979 13.825 2 12.025 2 10Z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <!-- END Contact -->

      <!-- Contact -->
      <div
        class="flex items-center gap-3 rounded-xl bg-white/60 p-3 backdrop-blur-sm"
      >
        <div
          class="flex size-10 items-center justify-center rounded-full bg-linear-to-br from-orange-500 to-red-600 text-sm font-medium text-white"
        >
          MB
        </div>
        <div class="grow">
          <p class="truncate text-sm font-semibold text-zinc-900">Mike Brown</p>
          <p
            class="mt-0.5 max-w-28 truncate text-xs text-zinc-500 sm:max-w-full"
          >
            mike.brown@email.com
          </p>
        </div>
        <div class="flex items-center gap-2">
          <button type="button" class="text-zinc-400 hover:text-zinc-800">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              class="hi-mini hi-phone inline-block size-5"
            >
              <path
                fill-rule="evenodd"
                d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
          <button type="button" class="text-zinc-400 hover:text-zinc-800">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              class="hi-mini hi-chat-bubble-oval-left inline-block size-5"
            >
              <path
                fill-rule="evenodd"
                d="M2 10c0-3.967 3.69-7 8-7 4.31 0 8 3.033 8 7s-3.69 7-8 7a9.165 9.165 0 0 1-1.504-.123 5.976 5.976 0 0 1-3.935 1.107.75.75 0 0 1-.584-1.143 3.478 3.478 0 0 0 .522-1.756C2.979 13.825 2 12.025 2 10Z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <!-- END Contact -->

      <!-- Contact -->
      <div
        class="flex items-center gap-3 rounded-xl bg-white/60 p-3 backdrop-blur-sm"
      >
        <div
          class="flex size-10 items-center justify-center rounded-full bg-linear-to-br from-purple-500 to-pink-600 text-sm font-medium text-white"
        >
          EJ
        </div>
        <div class="grow">
          <p class="truncate text-sm font-semibold text-zinc-900">
            Emma Johnson
          </p>
          <p
            class="mt-0.5 max-w-28 truncate text-xs text-zinc-500 sm:max-w-full"
          >
            emma.j@business.com
          </p>
        </div>
        <div class="flex items-center gap-2">
          <button type="button" class="text-zinc-400 hover:text-zinc-800">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              class="hi-mini hi-phone inline-block size-5"
            >
              <path
                fill-rule="evenodd"
                d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
          <button type="button" class="text-zinc-400 hover:text-zinc-800">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              class="hi-mini hi-chat-bubble-oval-left inline-block size-5"
            >
              <path
                fill-rule="evenodd"
                d="M2 10c0-3.967 3.69-7 8-7 4.31 0 8 3.033 8 7s-3.69 7-8 7a9.165 9.165 0 0 1-1.504-.123 5.976 5.976 0 0 1-3.935 1.107.75.75 0 0 1-.584-1.143 3.478 3.478 0 0 0 .522-1.756C2.979 13.825 2 12.025 2 10Z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <!-- END Contact -->
    </div>
  </div>
</div>
<!-- END Contact List -->