Product Card with Rating

<!--
  Day 95: Product Card with Rating

  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
-->

<!-- Product Card with Rating -->
<div
  class="relative mx-auto w-full max-w-lg rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
  <div
    class="flex flex-col gap-6 rounded-2xl bg-white p-6 ring-1 ring-zinc-200/50"
  >
    <!-- Product Image -->
    <div class="group relative overflow-hidden rounded-xl bg-zinc-50">
      <!-- Badge -->
      <span
        class="absolute top-4 right-4 z-10 inline-flex items-center rounded-full bg-orange-900/50 px-3 py-1 text-xs font-medium text-white ring-2 ring-orange-500"
      >
        New Arrival
      </span>
      <!-- END Badge -->

      <img
        src="https://images.unsplash.com/photo-1655628143766-172ca2198096?q=80&w=400&auto=format&fit=crop"
        alt="Premium Wireless Headphones"
        class="aspect-16/9 w-full object-cover transition duration-300 group-hover:scale-105"
      />
    </div>
    <!-- END Product Image -->

    <!-- Product Info -->
    <div class="space-y-4">
      <!-- Title and Price -->
      <div>
        <h2 class="text-lg font-semibold text-zinc-900">
          Premium Wireless Headphones
        </h2>
        <p class="mt-1 text-sm/relaxed text-zinc-600">
          Professional-grade wireless headphones featuring premium drivers,
          adaptive noise cancellation technology, and up to 30 hours of battery
          life. Engineered with memory foam cushions and adjustable headband for
          all-day comfort.
        </p>
      </div>
      <!-- END Title and Price -->

      <!-- Price and Rating -->
      <div class="flex items-center justify-between">
        <div class="flex items-baseline gap-2">
          <span class="text-xl font-bold text-zinc-900">$299</span>
          <span class="text-sm text-zinc-500 line-through">$399</span>
        </div>
        <div class="flex items-center gap-1">
          <div class="flex items-center text-orange-400">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-star inline-block size-4"
            >
              <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>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-star inline-block size-4"
            >
              <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>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-star inline-block size-4"
            >
              <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>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-star inline-block size-4"
            >
              <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>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="hi-micro hi-star inline-block size-4"
            >
              <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>
          </div>
          <span class="text-xs text-zinc-600">(127)</span>
        </div>
      </div>
      <!-- END Price and Rating -->

      <!-- Actions -->
      <div class="flex items-center gap-2">
        <button
          type="button"
          class="grow rounded-lg bg-orange-600 px-3 py-2 text-sm/6 font-medium text-white hover:bg-orange-700 focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:outline-hidden"
        >
          Add to Cart
        </button>
        <button
          type="button"
          class="rounded-lg border border-zinc-200 px-3 py-2 text-sm/6 text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:outline-hidden"
          aria-label="Add to wishlist"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-heart inline-block size-4"
          >
            <path
              d="M2 6.342a3.375 3.375 0 0 1 6-2.088 3.375 3.375 0 0 1 5.997 2.26c-.063 2.134-1.618 3.76-2.955 4.784a14.437 14.437 0 0 1-2.676 1.61c-.02.01-.038.017-.05.022l-.014.006-.004.002h-.002a.75.75 0 0 1-.592.001h-.002l-.004-.003-.015-.006a5.528 5.528 0 0 1-.232-.107 14.395 14.395 0 0 1-2.535-1.557C3.564 10.22 1.999 8.558 1.999 6.38L2 6.342Z"
            />
          </svg>
        </button>
      </div>
      <!-- END Actions -->
    </div>
  </div>
</div>
<!-- END Product Card with Rating -->