User Card 2

<!--
  Day 43: User Card 2

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

<!-- User Card 2 -->
<div
  class="relative mx-auto flex w-full max-w-md flex-col overflow-hidden rounded-xl bg-white shadow-lg transition"
>
  <!-- Header -->
  <div class="relative aspect-16/4 w-full">
    <!-- Photo -->
    <div
      class="absolute inset-0 -mb-12 flex items-end justify-center sm:-mb-16"
    >
      <div
        class="size-24 rounded-full border border-white/60 bg-white/25 p-2 ring-2 ring-white/20 backdrop-blur-sm sm:size-32"
      >
        <img
          src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Avatar"
          class="aspect-square w-full rounded-full object-cover shadow-sm shadow-slate-300"
        />
      </div>
    </div>
    <!-- END Photo -->

    <!-- Cover -->
    <img
      src="https://images.unsplash.com/photo-1462556791646-c201b8241a94?q=80&w=900&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Cover Image"
      class="aspect-16/4 w-full object-cover"
    />
    <!-- END Cover -->
  </div>
  <!-- END Header -->

  <!-- Body -->
  <div class="grow px-7 pt-14 pb-7 text-center sm:pt-18">
    <h3 class="text-xl font-bold">Michael Thompson</h3>
    <div
      class="mt-1 inline-block rounded-full bg-sky-50 px-2 py-1 text-xs font-semibold text-sky-600"
    >
      Senior Frontend Engineer
    </div>
    <hr class="my-5 border-dashed border-gray-200" />
    <p class="text-left text-sm leading-relaxed text-slate-600">
      Passionate about creating intuitive user experiences and building
      responsive interfaces. Always exploring new technologies and design
      patterns to stay ahead in the ever-evolving digital landscape.
    </p>
    <hr class="my-5 border-dashed border-gray-200" />
    <div class="flex flex-col justify-between gap-3 sm:flex-row">
      <a
        href="javascript:void(0)"
        class="flex w-full items-center justify-center gap-2 rounded-lg border border-secondary-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-secondary-800 hover:border-secondary-300 hover:text-secondary-900 hover:shadow-xs focus:ring-3 focus:ring-secondary-300/25 active:border-secondary-200 active:shadow-none"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-user-circle inline-block size-4 opacity-50"
        >
          <path
            fill-rule="evenodd"
            d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-5-2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM8 9c-1.825 0-3.422.977-4.295 2.437A5.49 5.49 0 0 0 8 13.5a5.49 5.49 0 0 0 4.294-2.063A4.997 4.997 0 0 0 8 9Z"
            clip-rule="evenodd"
          />
        </svg>
        <span>View profile</span>
      </a>
      <a
        href="javascript:void(0)"
        class="flex w-full items-center justify-center gap-2 rounded-lg border border-secondary-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-secondary-800 hover:border-secondary-300 hover:text-secondary-900 hover:shadow-xs focus:ring-3 focus:ring-secondary-300/25 active:border-secondary-200 active:shadow-none"
      >
        <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 opacity-50"
        >
          <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>
        <span>Message</span>
      </a>
    </div>
  </div>
  <!-- END Body -->
</div>
<!-- END User Card 2 -->