Resort Listing Card with Image Overlay & Actions

<div class="max-w-xl mr-auto ml-auto">
        <section class="relative ring-1 ring-slate-900/5 bg-white rounded-[40px] shadow-xl">
          <!-- Header -->
          

          <!-- Image + Overlay -->
          <div class="pt-6 pr-6 pl-6">
            <div class="relative overflow-hidden rounded-[30px]">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c35485a9-7b0a-4b9a-afe0-8303d76c9b43_1600w.jpg" alt="Ocean-facing wellness room with serene view" class="w-full h-64 md:h-72 object-cover" style="">
              <!-- Bottom overlay -->
              <div class="pointer-events-none absolute inset-x-4 bottom-4 md:inset-x-6">
                <div class="flex gap-2 md:gap-3 items-center">
  <div class="pointer-events-auto flex items-center gap-2 rounded-full bg-slate-900/80 backdrop-blur-md px-3.5 py-2 ring-1 ring-slate-700 shadow-sm">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="map-pin" class="lucide lucide-map-pin size-4 w-[20px] h-[20px]" style="width: 20px; height: 20px; color: rgb(203, 213, 225);"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg>
    <span class="text-[13px] md:text-sm font-medium text-slate-100 font-sans">Isola Azzurra, Italy</span>
  </div>

  <div class="flex gap-2 pointer-events-auto ml-auto items-center">
  <button class="inline-flex size-10 items-center justify-center rounded-full bg-white/10 backdrop-blur-xl border border-white/20 shadow-lg hover:bg-white/20 transition">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="globe" class="lucide lucide-globe size-5 w-[20px] h-[20px]" style="width: 20px; height: 20px; color: rgb(255, 255, 255);"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>
  </button>
  <button class="inline-flex size-10 items-center justify-center rounded-full bg-white/10 backdrop-blur-xl border border-white/20 shadow-lg hover:bg-white/20 transition">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="phone" class="lucide lucide-phone size-5 w-[20px] h-[20px]" style="width: 20px; height: 20px; color: rgb(255, 255, 255);"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"></path></svg>
  </button>
  <button id="likeBtn" class="inline-flex size-10 items-center justify-center rounded-full bg-white/10 backdrop-blur-xl border border-white/20 shadow-lg hover:bg-white/20 transition">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="heart" id="likeIcon" class="lucide lucide-heart size-5 w-[20px] h-[20px]" style="width: 20px; height: 20px; color: rgb(255, 255, 255);"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg>
  </button>
</div>
</div>
              </div>
            </div>
          </div>

          <!-- Content -->
          <div class="pt-5 pr-6 pb-6 pl-6">
            <div class="flex items-start justify-between gap-4">
              <div class="">
                <h2 class="text-[22px] md:text-2xl text-slate-900 tracking-tight font-sans font-semibold" style="">Azure Bay Retreat</h2>
                <div class="mt-1.5 flex items-center gap-2">
                  <span class="text-sm text-slate-600 font-sans">Spa • Wellness</span>
                  <span class="inline-flex items-center rounded-full bg-emerald-100 text-emerald-700 text-[12px] font-medium px-2.5 py-1 font-sans">
                    Open Now
                  </span>
                </div>
              </div>
              <p class="text-xl md:text-2xl tracking-tight text-slate-900 font-sans font-semibold" style="">$92</p>
            </div>

            <div class="mt-5 border-t border-slate-100 pt-4">
              <div class="flex items-center justify-between gap-3">
                <!-- Avatars + rating -->
                <div class="flex items-center gap-3">
                  <div class="flex -space-x-2">
                    <img class="inline-block size-8 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&amp;w=200&amp;auto=format&amp;fit=crop" alt="Guest 1" style="">
                    <img class="inline-block size-8 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?q=80&amp;w=200&amp;auto=format&amp;fit=crop" alt="Guest 2" style="">
                    <img class="inline-block size-8 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&amp;w=200&amp;auto=format&amp;fit=crop" alt="Guest 3">
                    <img class="inline-block size-8 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?q=80&amp;w=200&amp;auto=format&amp;fit=crop" alt="Guest 4">
                    <div class="inline-flex size-8 items-center justify-center rounded-full bg-slate-100 text-[12px] font-medium ring-2 ring-white text-slate-700 font-sans">+5</div>
                  </div>
                  <div class="flex items-center gap-1.5 text-slate-700">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star size-4 text-amber-500"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
                    <span class="text-sm font-medium font-sans">4.8</span>
                    <span class="text-sm text-slate-500 font-sans">(210 Reviews)</span>
                  </div>
                </div>

                <button class="inline-flex hover:bg-teal-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 text-sm font-medium text-white bg-teal-600 rounded-2xl pt-3 pr-5 pb-3 pl-5 shadow-sm items-center justify-center font-sans">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar" class="lucide lucide-calendar mr-2 size-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
                  Book Now
                </button>
              </div>
            </div>
          </div>
        </section>
      </div>