Team Members Grid

<!--
  Day 114: Team members grid

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

<!-- Team Members Grid -->
<div
  class="mx-auto w-full max-w-2xl rounded-3xl bg-white/40 p-6 shadow-sm shadow-zinc-300 backdrop-blur-xs"
>
  <!-- Header -->
  <div class="mb-6 flex items-center justify-between">
    <div>
      <h3 class="text-xl font-bold text-zinc-900">Team members</h3>
      <p class="mt-0.5 text-sm font-medium text-zinc-500">
        8 members across 3 departments
      </p>
    </div>
    <button
      type="button"
      class="flex items-center gap-1.5 rounded-xl bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition-transform hover:bg-zinc-700 active:scale-97 active:bg-zinc-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>Invite</span>
    </button>
  </div>
  <!-- END Header -->

  <!-- Grid -->
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <!-- Member Card -->
    <div
      class="flex items-center gap-4 rounded-2xl border border-zinc-200 bg-white p-4 ring-2 ring-zinc-200/50"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=96&h=96&q=80"
          alt="James Wilson"
          class="size-12 rounded-full object-cover"
        />
        <span
          class="absolute right-0 bottom-0 size-3 rounded-full bg-emerald-400 ring-2 ring-white"
          aria-label="Online"
        ></span>
      </div>
      <div class="min-w-0 grow">
        <p class="truncate text-sm font-semibold text-zinc-900">James Wilson</p>
        <p class="mt-0.5 truncate text-xs font-medium text-zinc-500">
          Lead Designer
        </p>
      </div>
      <div class="flex flex-none items-center gap-1">
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="Send message"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-message-circle inline-block size-4"
          >
            <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
          </svg>
        </a>
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="View profile"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-ellipsis inline-block size-4"
          >
            <circle cx="12" cy="12" r="1" />
            <circle cx="19" cy="12" r="1" />
            <circle cx="5" cy="12" r="1" />
          </svg>
        </a>
      </div>
    </div>
    <!-- END Member Card -->

    <!-- Member Card -->
    <div
      class="flex items-center gap-4 rounded-2xl border border-zinc-200 bg-white p-4 ring-2 ring-zinc-200/50"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=96&h=96&q=80"
          alt="Sarah Chen"
          class="size-12 rounded-full object-cover"
        />
        <span
          class="absolute right-0 bottom-0 size-3 rounded-full bg-emerald-400 ring-2 ring-white"
          aria-label="Online"
        ></span>
      </div>
      <div class="min-w-0 grow">
        <p class="truncate text-sm font-semibold text-zinc-900">Sarah Chen</p>
        <p class="mt-0.5 truncate text-xs font-medium text-zinc-500">
          Frontend Engineer
        </p>
      </div>
      <div class="flex flex-none items-center gap-1">
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="Send message"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-message-circle inline-block size-4"
          >
            <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
          </svg>
        </a>
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="View profile"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-ellipsis inline-block size-4"
          >
            <circle cx="12" cy="12" r="1" />
            <circle cx="19" cy="12" r="1" />
            <circle cx="5" cy="12" r="1" />
          </svg>
        </a>
      </div>
    </div>
    <!-- END Member Card -->

    <!-- Member Card -->
    <div
      class="flex items-center gap-4 rounded-2xl border border-zinc-200 bg-white p-4 ring-2 ring-zinc-200/50"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=96&h=96&q=80"
          alt="Marcus Rivera"
          class="size-12 rounded-full object-cover"
        />
        <span
          class="absolute right-0 bottom-0 size-3 rounded-full bg-zinc-300 ring-2 ring-white"
          aria-label="Offline"
        ></span>
      </div>
      <div class="min-w-0 grow">
        <p class="truncate text-sm font-semibold text-zinc-900">
          Marcus Rivera
        </p>
        <p class="mt-0.5 truncate text-xs font-medium text-zinc-500">
          Backend Engineer
        </p>
      </div>
      <div class="flex flex-none items-center gap-1">
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="Send message"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-message-circle inline-block size-4"
          >
            <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
          </svg>
        </a>
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="View profile"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-ellipsis inline-block size-4"
          >
            <circle cx="12" cy="12" r="1" />
            <circle cx="19" cy="12" r="1" />
            <circle cx="5" cy="12" r="1" />
          </svg>
        </a>
      </div>
    </div>
    <!-- END Member Card -->

    <!-- Member Card -->
    <div
      class="flex items-center gap-4 rounded-2xl border border-zinc-200 bg-white p-4 ring-2 ring-zinc-200/50"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=96&h=96&q=80"
          alt="Emily Parker"
          class="size-12 rounded-full object-cover"
        />
        <span
          class="absolute right-0 bottom-0 size-3 rounded-full bg-emerald-400 ring-2 ring-white"
          aria-label="Online"
        ></span>
      </div>
      <div class="min-w-0 grow">
        <p class="truncate text-sm font-semibold text-zinc-900">Emily Parker</p>
        <p class="mt-0.5 truncate text-xs font-medium text-zinc-500">
          Product Manager
        </p>
      </div>
      <div class="flex flex-none items-center gap-1">
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="Send message"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-message-circle inline-block size-4"
          >
            <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
          </svg>
        </a>
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="View profile"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-ellipsis inline-block size-4"
          >
            <circle cx="12" cy="12" r="1" />
            <circle cx="19" cy="12" r="1" />
            <circle cx="5" cy="12" r="1" />
          </svg>
        </a>
      </div>
    </div>
    <!-- END Member Card -->

    <!-- Member Card -->
    <div
      class="flex items-center gap-4 rounded-2xl border border-zinc-200 bg-white p-4 ring-2 ring-zinc-200/50"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=96&h=96&q=80"
          alt="David Kim"
          class="size-12 rounded-full object-cover"
        />
        <span
          class="absolute right-0 bottom-0 size-3 rounded-full bg-amber-400 ring-2 ring-white"
          aria-label="Away"
        ></span>
      </div>
      <div class="min-w-0 grow">
        <p class="truncate text-sm font-semibold text-zinc-900">David Kim</p>
        <p class="mt-0.5 truncate text-xs font-medium text-zinc-500">
          DevOps Engineer
        </p>
      </div>
      <div class="flex flex-none items-center gap-1">
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="Send message"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-message-circle inline-block size-4"
          >
            <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
          </svg>
        </a>
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="View profile"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-ellipsis inline-block size-4"
          >
            <circle cx="12" cy="12" r="1" />
            <circle cx="19" cy="12" r="1" />
            <circle cx="5" cy="12" r="1" />
          </svg>
        </a>
      </div>
    </div>
    <!-- END Member Card -->

    <!-- Member Card -->
    <div
      class="flex items-center gap-4 rounded-2xl border border-zinc-200 bg-white p-4 ring-2 ring-zinc-200/50"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=96&h=96&q=80"
          alt="Olivia Martinez"
          class="size-12 rounded-full object-cover"
        />
        <span
          class="absolute right-0 bottom-0 size-3 rounded-full bg-emerald-400 ring-2 ring-white"
          aria-label="Online"
        ></span>
      </div>
      <div class="min-w-0 grow">
        <p class="truncate text-sm font-semibold text-zinc-900">
          Olivia Martinez
        </p>
        <p class="mt-0.5 truncate text-xs font-medium text-zinc-500">
          UX Researcher
        </p>
      </div>
      <div class="flex flex-none items-center gap-1">
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="Send message"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-message-circle inline-block size-4"
          >
            <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
          </svg>
        </a>
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="View profile"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-ellipsis inline-block size-4"
          >
            <circle cx="12" cy="12" r="1" />
            <circle cx="19" cy="12" r="1" />
            <circle cx="5" cy="12" r="1" />
          </svg>
        </a>
      </div>
    </div>
    <!-- END Member Card -->

    <!-- Member Card -->
    <div
      class="flex items-center gap-4 rounded-2xl border border-zinc-200 bg-white p-4 ring-2 ring-zinc-200/50"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=96&h=96&q=80"
          alt="Ryan Thompson"
          class="size-12 rounded-full object-cover"
        />
        <span
          class="absolute right-0 bottom-0 size-3 rounded-full bg-emerald-400 ring-2 ring-white"
          aria-label="Online"
        ></span>
      </div>
      <div class="min-w-0 grow">
        <p class="truncate text-sm font-semibold text-zinc-900">
          Ryan Thompson
        </p>
        <p class="mt-0.5 truncate text-xs font-medium text-zinc-500">
          QA Engineer
        </p>
      </div>
      <div class="flex flex-none items-center gap-1">
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="Send message"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-message-circle inline-block size-4"
          >
            <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
          </svg>
        </a>
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="View profile"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-ellipsis inline-block size-4"
          >
            <circle cx="12" cy="12" r="1" />
            <circle cx="19" cy="12" r="1" />
            <circle cx="5" cy="12" r="1" />
          </svg>
        </a>
      </div>
    </div>
    <!-- END Member Card -->

    <!-- Member Card -->
    <div
      class="flex items-center gap-4 rounded-2xl border border-zinc-200 bg-white p-4 ring-2 ring-zinc-200/50"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=96&h=96&q=80"
          alt="Lisa Chang"
          class="size-12 rounded-full object-cover"
        />
        <span
          class="absolute right-0 bottom-0 size-3 rounded-full bg-zinc-300 ring-2 ring-white"
          aria-label="Offline"
        ></span>
      </div>
      <div class="min-w-0 grow">
        <p class="truncate text-sm font-semibold text-zinc-900">Lisa Chang</p>
        <p class="mt-0.5 truncate text-xs font-medium text-zinc-500">
          Data Analyst
        </p>
      </div>
      <div class="flex flex-none items-center gap-1">
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="Send message"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-message-circle inline-block size-4"
          >
            <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
          </svg>
        </a>
        <a
          href="javascript:void(0)"
          class="flex size-8 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
          aria-label="View profile"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-ellipsis inline-block size-4"
          >
            <circle cx="12" cy="12" r="1" />
            <circle cx="19" cy="12" r="1" />
            <circle cx="5" cy="12" r="1" />
          </svg>
        </a>
      </div>
    </div>
    <!-- END Member Card -->
  </div>
  <!-- END Grid -->
</div>
<!-- END Team Members Grid -->