Tailwind CSS Profile Card

<div class="card relative w-full max-w-sm">
  <img
    src="https://images.pexels.com/photos/38485602/pexels-photo-38485602.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=768&amp;h=307&amp;fit=crop"
    alt=""
    class="aspect-5/2 w-full object-cover"
  /><button
    type="button"
    class="btn btn-outline btn-sm btn-icon absolute top-3 right-3"
    aria-label="More options"
  >
    <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"
    >
      <circle cx="12" cy="12" r="1"></circle>
      <circle cx="19" cy="12" r="1"></circle>
      <circle cx="5" cy="12" r="1"></circle>
    </svg>
  </button>
  <div class="card-header">
    <span class="avatar -mt-14 size-20 ring-4 ring-card"
      ><img
        class="avatar-image"
        alt="Leila Navarro"
        src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&amp;h=640&amp;fit=facearea&amp;facepad=2.8&amp;auto=format&amp;q=100&amp;bg-remove=true&amp;bg=e5e5e5" /><span
        class="avatar-fallback"
        >LN</span
      ><span class="avatar-badge size-4 bg-green-600 dark:bg-green-800"></span
    ></span>
    <h3 class="card-title mt-2">Leila Navarro</h3>
    <p class="card-description">UX Lead, Design Manager</p>
    <p class="mt-2">
      Supporting startups and SaaS in enhancing their conversions. Always open
      to thoughtful design.
    </p>
  </div>
  <div class="card-footer gap-3">
    <button type="button" class="btn flex-1">
      <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="icon-start"
      >
        <path d="M5 12h14"></path>
        <path d="M12 5v14"></path></svg
      >Follow</button
    ><button type="button" class="btn btn-outline flex-1">Message</button>
  </div>
</div>