Property Listing Card

<!--
  Day 101: Property Listing 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
-->

<!-- Property Listing Card -->
<div
  class="relative mx-auto w-full max-w-sm rounded-3xl border border-zinc-200 bg-white p-4 ring-4 ring-zinc-300/25 sm:p-6"
>
  <div class="flex flex-col gap-4">
    <!-- Property Image -->
    <div class="relative overflow-hidden rounded-2xl">
      <img
        src="https://images.unsplash.com/photo-1664261421791-c25c5760f577?q=80&w=900&auto=format&fit=crop"
        alt="Modern apartment with city view"
        class="aspect-4/3 w-full bg-zinc-600 object-cover"
      />

      <!-- Favorite Button -->
      <button
        type="button"
        class="absolute top-4 right-4 flex size-9 items-center justify-center rounded-full bg-white/80 backdrop-blur-sm transition-all hover:scale-110 hover:bg-white hover:text-rose-600 active:scale-100"
        aria-label="Add to favorites"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="hi-mini hi-heart inline-block size-5"
        >
          <path
            d="m9.653 16.915-.005-.003-.019-.01a20.759 20.759 0 0 1-1.162-.682 22.045 22.045 0 0 1-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 0 1 8-2.828A4.5 4.5 0 0 1 18 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 0 1-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 0 1-.69.001l-.002-.001Z"
          />
        </svg>
      </button>
      <!-- END Favorite Button -->

      <!-- Property Badge -->
      <div class="absolute bottom-4 left-4">
        <span
          class="inline-flex items-center rounded-full bg-zinc-950 px-3 py-1 text-xs font-medium text-white"
        >
          Superhost
        </span>
      </div>
      <!-- END Property Badge -->
    </div>
    <!-- END Property Image -->

    <!-- Property Details -->
    <div>
      <!-- Location & Rating -->
      <div class="flex items-center justify-between">
        <h3 class="font-semibold text-zinc-900">Downtown Loft · New York</h3>
        <div class="flex items-center gap-1">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-star inline-block size-4 text-teal-500"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z"
              clip-rule="evenodd"
            />
          </svg>
          <span class="text-sm font-semibold text-zinc-700">4.9</span>
        </div>
      </div>
      <!-- END Location & Rating -->

      <!-- Property Type -->
      <p class="text-sm font-medium text-zinc-600">
        Entire apartment · 2 bedrooms
      </p>
      <!-- END Property Type -->

      <div class="mt-5 flex items-center justify-between gap-4">
        <!-- Price -->
        <div class="flex items-baseline space-x-1">
          <span class="text-lg font-semibold text-zinc-900">$149</span>
          <span class="text-sm text-zinc-600">/night</span>
        </div>
        <!-- END Price -->

        <!-- Dates -->
        <p class="mt-2 text-sm text-zinc-600">Dec 15 – 20</p>
      </div>
    </div>
  </div>
</div>
<!-- END Property Listing Card -->