Hotel Listing Card with Like & Book Actions

<div class="max-w-sm mx-auto">
  <section
    class="relative overflow-hidden bg-slate-900/30 border-slate-700/50 border rounded-3xl shadow-2xl backdrop-blur-xl">

    <!-- Image -->
    <div class="p-4">
      <div class="relative overflow-hidden rounded-2xl">
        <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?q=80&amp;w=800&amp;auto=format&amp;fit=crop" alt="Luxury hotel suite" class="w-full h-40 object-cover">

        <!-- Overlay controls -->
        <div class="absolute inset-3 flex items-start justify-between">
          <div
            class="flex items-center gap-1.5 rounded-full bg-black/40 backdrop-blur-md px-2.5 py-1.5 border border-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
              class="text-slate-300">
              <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-xs font-medium text-white">NYC</span>
          </div>

          <button id="likeBtn" class="size-8 rounded-full bg-black/40 backdrop-blur-md border border-white/10 flex items-center justify-center hover:bg-black/60 transition">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" id="likeIcon" class="text-white"><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>

    <!-- Content -->
    <div class="pr-4 pb-4 pl-4">
      <div class="flex items-start justify-between mb-3">
        <div>
          <h2 class="text-lg font-semibold text-white tracking-tight">Grand Metropolitan</h2>
          <div class="flex items-center gap-2 mt-0.5">
            <span class="text-xs text-slate-400">5-Star Suite</span>
            <span class="inline-flex items-center rounded-full bg-green-500/20 text-green-400 text-xs px-2 py-0.5 border border-green-500/30">
                  Available
                </span>
          </div>
        </div>
        <div class="text-right">
          <p class="text-lg font-semibold text-white tracking-tight">$340</p>
          <p class="text-xs text-slate-500">per night</p>
        </div>
      </div>

      <!-- Divider -->
      <div class="h-px bg-gradient-to-r from-transparent via-slate-700/50 to-transparent mb-3"></div>

      <div class="flex items-center justify-between">
        <!-- Rating -->
        <div class="flex items-center gap-2">
          <div class="flex -space-x-1.5">
            <img class="size-6 rounded-full ring-1 ring-slate-700 object-cover" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&amp;w=100&amp;auto=format&amp;fit=crop" alt="">
            <img class="size-6 rounded-full ring-1 ring-slate-700 object-cover" src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?q=80&amp;w=100&amp;auto=format&amp;fit=crop" alt="">
            <div
              class="size-6 rounded-full bg-slate-700/70 backdrop-blur ring-1 ring-slate-600 flex items-center justify-center">
              <span class="text-xs text-slate-300">+8</span>
            </div>
          </div>
          <div class="flex items-center gap-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"
              stroke="none" class="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-xs font-medium text-slate-300">4.9</span>
          </div>
        </div>

        <button class="px-4 py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl text-sm font-medium text-white hover:bg-white/20 transition">
              Book Now
            </button>
      </div>
    </div>
  </section>
</div>