User Card

<!--
  Day 36: User Card

  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 -->
<a
  href="javascript:void(0)"
  class="relative mx-auto flex w-full max-w-md flex-col overflow-hidden rounded-xl bg-white shadow-lg transition hover:opacity-75 active:opacity-100"
>
  <!-- Header -->
  <div class="relative aspect-16/8 w-full">
    <!-- Photo -->
    <div class="absolute inset-0 flex items-center justify-center">
      <div
        class="size-32 rounded-full border border-white/40 bg-white/25 p-2 backdrop-blur-sm"
      >
        <img
          src="https://images.unsplash.com/photo-1506863530036-1efeddceb993?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-1740507619572-ac180ca2630f?q=80&w=900&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Cover Image"
      class="aspect-16/8 w-full object-cover"
    />
    <!-- END Cover -->
  </div>
  <!-- END Header -->

  <!-- Body -->
  <div class="grow p-7 text-center">
    <h3 class="text-xl font-bold">Sarah Johnson</h3>
    <div
      class="mt-1 inline-block rounded-full bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-600"
    >
      Web Developer with 5+ years of experience
    </div>
    <p class="mt-3 text-left text-sm leading-relaxed text-slate-600">
      Specializing in React, Vue, and modern CSS frameworks. Also an avid
      open-source contributor and tech community mentor who loves solving
      complex UI challenges and optimizing web performance.
    </p>
  </div>
  <!-- END Body -->
</a>
<!-- END User Card -->