Message List Group

<!--
  Day 9: Message list group

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

<!-- Message List Group -->
<div
  class="relative mx-auto w-full max-w-sm overflow-hidden rounded-3xl border border-zinc-200 bg-white/40 p-4 shadow-sm shadow-slate-300 backdrop-blur-xs"
>
  <div class="grow divide-y divide-dashed divide-zinc-200">
    <a
      href="javascript:void(0)"
      class="group flex gap-3 p-4 hover:bg-zinc-50 active:bg-transparent"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1528892952291-009c663ce843?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;h=160&amp;ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2ODc1OTQ0OQ&amp;ixlib=rb-4.0.3&amp;q=80&amp;utm_campaign=api-credit&amp;utm_medium=referral&amp;utm_source=unsplash_source&amp;w=160"
          alt="User Avatar"
          class="size-8 rounded-full border-2 border-zinc-200 group-hover:border-pink-300"
        />
      </div>
      <div class="grow">
        <div class="mb-0.5 flex items-center justify-between">
          <p class="line-clamp-1 text-sm font-medium">Alan Wake</p>
          <div class="flex-none self-start">
            <p
              class="text-xs font-medium text-zinc-400 group-hover:text-zinc-500"
            >
              <span class="text-green-500">•</span>
              Now
            </p>
          </div>
        </div>
        <h3
          class="mb-1 line-clamp-1 text-sm font-semibold group-hover:text-pink-500"
        >
          Inspiring Results
        </h3>
        <p class="line-clamp-2 text-xs font-medium text-zinc-500">
          Hi John, let's celebrate our achievements together. Join us for a team
          gathering filled with camaraderie and appreciation.
        </p>
      </div>
    </a>
    <a
      href="javascript:void(0)"
      class="group flex gap-3 p-4 hover:bg-zinc-50 active:bg-transparent"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1567186937675-a5131c8a89ea?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;h=160&amp;ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&amp;ixlib=rb-1.2.1&amp;q=80&amp;utm_campaign=api-credit&amp;utm_medium=referral&amp;utm_source=unsplash_source&amp;w=160"
          alt="User Avatar"
          class="size-8 rounded-full border-2 border-zinc-200 group-hover:border-pink-300"
        />
      </div>
      <div class="grow">
        <div class="mb-0.5 flex items-center justify-between">
          <p class="line-clamp-1 text-sm font-medium">John Smith</p>
          <div class="flex-none self-start">
            <p
              class="text-xs font-medium text-zinc-400 group-hover:text-zinc-500"
            >
              Now
            </p>
          </div>
        </div>
        <h3 class="mb-1 text-sm font-semibold group-hover:text-pink-500">
          <span>Design Report</span>
          <svg
            class="hi-mini hi-paper-clip inline-block size-4 text-zinc-500"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </h3>
        <p class="line-clamp-2 text-xs font-medium text-zinc-500">
          Hello John, I just wanted to let you know that we have a look into the
          design and have our report ready..
        </p>
      </div>
    </a>
    <a
      href="javascript:void(0)"
      class="group flex gap-3 p-4 hover:bg-zinc-50 active:bg-transparent"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1580489944761-15a19d654956?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;h=160&amp;ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2ODc2OTg2MQ&amp;ixlib=rb-4.0.3&amp;q=80&amp;utm_campaign=api-credit&amp;utm_medium=referral&amp;utm_source=unsplash_source&amp;w=160"
          alt="User Avatar"
          class="size-8 rounded-full border-2 border-zinc-200 group-hover:border-pink-300"
        />
      </div>
      <div class="grow">
        <div class="mb-0.5 flex items-center justify-between">
          <p class="line-clamp-1 text-sm font-medium">Anna Lee</p>
          <div class="flex-none self-start">
            <p
              class="text-xs font-medium text-zinc-400 group-hover:text-zinc-500"
            >
              2 min ago
            </p>
          </div>
        </div>
        <h3 class="mb-1 text-sm font-semibold group-hover:text-pink-500">
          Exclusive dashboard preview
        </h3>
        <p class="line-clamp-2 text-xs font-medium text-zinc-500">
          Hi John you're invited to an exclusive preview of our client's new
          website. Join us and provide valuable feedback
        </p>
      </div>
    </a>
    <a
      href="javascript:void(0)"
      class="group flex gap-3 p-4 hover:bg-zinc-50 active:bg-transparent"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;h=160&amp;ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&amp;ixlib=rb-1.2.1&amp;q=80&amp;utm_campaign=api-credit&amp;utm_medium=referral&amp;utm_source=unsplash_source&amp;w=160"
          alt="User Avatar"
          class="size-8 rounded-full border-2 border-zinc-200 group-hover:border-pink-300"
        />
      </div>
      <div class="grow">
        <div class="mb-0.5 flex items-center justify-between">
          <p class="line-clamp-1 text-sm font-medium">Kate Lynne</p>
          <div class="flex-none self-start">
            <p
              class="text-xs font-medium text-zinc-400 group-hover:text-zinc-500"
            >
              5 hours ago
            </p>
          </div>
        </div>
        <h3 class="mb-1 text-sm font-semibold group-hover:text-pink-500">
          Limited Resources Alert
        </h3>
        <p class="line-clamp-2 text-xs font-medium text-zinc-500">
          Hi John, our project is experiencing resource constraints. Let's work
          together to optimize its performance and efficiency.
        </p>
      </div>
    </a>
    <a
      href="javascript:void(0)"
      class="group flex gap-3 p-4 hover:bg-zinc-50 active:bg-transparent"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;h=160&amp;ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&amp;ixlib=rb-1.2.1&amp;q=80&amp;utm_campaign=api-credit&amp;utm_medium=referral&amp;utm_source=unsplash_source&amp;w=160"
          alt="User Avatar"
          class="size-8 rounded-full border-2 border-zinc-200 group-hover:border-pink-300"
        />
      </div>
      <div class="grow">
        <div class="mb-0.5 flex items-center justify-between">
          <p class="line-clamp-1 text-sm font-medium">Mike Scott</p>
          <div class="flex-none self-start">
            <p
              class="text-xs font-medium text-zinc-400 group-hover:text-zinc-500"
            >
              2 hours ago
            </p>
          </div>
        </div>
        <h3 class="mb-1 text-sm font-semibold group-hover:text-pink-500">
          Get Inspired
        </h3>
        <p class="line-clamp-2 text-xs font-medium text-zinc-500">
          Hello John, seeking inspiration for our projects? Check out our blog
          post on responsive design for expert insights.
        </p>
      </div>
    </a>
    <a
      href="javascript:void(0)"
      class="group flex gap-3 p-4 hover:bg-zinc-50 active:bg-transparent"
    >
      <div class="relative flex-none">
        <img
          src="https://images.unsplash.com/photo-1514846326710-096e4a8035e0?crop=entropy&amp;cs=tinysrgb&amp;fit=crop&amp;fm=jpg&amp;h=160&amp;ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2MjYzODYzMg&amp;ixlib=rb-1.2.1&amp;q=80&amp;utm_campaign=api-credit&amp;utm_medium=referral&amp;utm_source=unsplash_source&amp;w=160"
          alt="User Avatar"
          class="size-8 rounded-full border-2 border-zinc-200 group-hover:border-pink-300"
        />
      </div>
      <div class="grow">
        <div class="mb-0.5 flex items-center justify-between">
          <p class="line-clamp-1 text-sm font-medium">Sue Keller</p>
          <div class="flex-none self-start">
            <p
              class="text-xs font-medium text-zinc-400 group-hover:text-zinc-500"
            >
              1 day ago
            </p>
          </div>
        </div>
        <h3 class="mb-1 text-sm font-semibold group-hover:text-pink-500">
          Unlock New Features
        </h3>
        <p class="line-clamp-2 text-xs font-medium text-zinc-500">
          Hello Team, expand your skillset by joining our webinar on the newest
          frameworks. Unlock innovative features for our projects!
        </p>
      </div>
    </a>
    <div class="p-3 text-center">
      <button
        type="button"
        class="active:text-zinc-00 group inline-flex items-center gap-0.5 rounded-sm bg-white px-2 py-1.5 text-sm font-medium hover:bg-pink-50 hover:text-pink-900 active:bg-transparent"
      >
        <svg
          class="hi-mini hi-arrow-small-down inline-block size-5 text-zinc-500 group-hover:text-pink-600"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            d="M10 5a.75.75 0 01.75.75v6.638l1.96-2.158a.75.75 0 111.08 1.04l-3.25 3.5a.75.75 0 01-1.08 0l-3.25-3.5a.75.75 0 111.08-1.04l1.96 2.158V5.75A.75.75 0 0110 5z"
            clip-rule="evenodd"
          ></path>
        </svg>
        <span>Load more..</span>
      </button>
    </div>
  </div>
</div>
<!-- END Message List Group -->