E-commerce Product Card

A product card with image, name, price, rating, and add-to-cart button. Includes a wishlist toggle and sale badge.

Cards cards ecommerce interactive shadcn responsive

Prompt

Create an e-commerce product card with:
- Product image taking up the top half (use a placeholder)
- "Sale" badge overlay in the top-left corner (conditionally shown)
- Wishlist heart button in the top-right corner (toggleable)
- Product name (truncated to 2 lines)
- Star rating with review count
- Original price struck through next to sale price
- "Add to Cart" button full width at bottom
- Hover: image zooms slightly, card elevates
- Use shadcn/ui, Tailwind CSS, responsive
- Show 3 cards in a grid

Share:Share on X