cardsBeginnerhover
Product Card
E-commerce product card with image, name, price, and an add-to-cart action.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build an e-commerce product card with Tailwind: image at the top in a fixed aspect ratio, then padding with the product name, a price line, and a small add-to-cart button to the right of the price. The image scales up slightly on card hover (scale-105 + transition).
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/product-cards/1.html
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-product-card
-->
<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-1523381210434-271e8be1f52b?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-1523381140794-a1eef18a37c7?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>
<p class="mt-1.5 tracking-wide text-gray-900">$189.99</p>
</div>
</a>
</div>
</div>