cardsBeginner

Product — With Rating

Product card with star rating and review count.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a product card with Tailwind: image at the top, then product name, price, and a row of star ratings with a numeric review count. Add-to-cart button on hover.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/product-cards/2.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-product-card-2
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto max-w-md p-6 w-full">
<a href="#" class="group block overflow-hidden">
      <div class="relative h-87.5 sm:h-112.5">
        <img
          src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?auto=format&fit=crop&q=80&w=1160"
          alt=""
          class="absolute inset-0 h-full w-full object-cover opacity-100 group-hover:opacity-0"
        />

        <img
          src="https://images.unsplash.com/photo-1600185365926-3a2ce3cdb9eb?auto=format&fit=crop&q=80&w=1160"
          alt=""
          class="absolute inset-0 h-full w-full object-cover opacity-0 group-hover:opacity-100"
        />
      </div>

      <div class="relative bg-white pt-3">
        <h3 class="text-sm text-gray-700 group-hover:underline group-hover:underline-offset-4">
          Limited Edition Sports Trainer
        </h3>

        <div class="mt-1.5 flex items-center justify-between text-gray-900">
          <p class="tracking-wide">$189.99</p>

          <p class="text-xs tracking-wide uppercase">6 Colors</p>
        </div>
      </div>
    </a>
  </div>
</div>