cardsIntermediate

Product — Variant Swatches

Product card with color variant swatches.

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, name, price, and a row of small colored swatches representing variant choices. Hover on swatch hints at variant change.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/product-cards/4.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-product-card-4
-->
<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">
      <img
        src="https://images.unsplash.com/photo-1592921870789-04563d55041c?auto=format&fit=crop&q=80&w=1160"
        alt=""
        class="aspect-square w-full rounded-sm object-cover"
      />

      <div class="mt-3">
        <h3 class="font-medium text-gray-900 group-hover:underline group-hover:underline-offset-4">
          Simple Watch
        </h3>

        <p class="mt-1 text-sm text-gray-700">$150</p>
      </div>
    </a>
  </div>
</div>