Six e-commerce cards in Tailwind: a product card with rating and Add to cart, a sale card with old and new prices, a card with colour swatches, a card with hover actions, a cart line item and a featured product block.
A product card with an image area, name, rating, price and an Add to cart button. The rating is text with a star, the price uses tabular numbers, and the button names the product so screen readers hear Add Linen tote to cart.
A product card on sale with a discount badge, the old price struck through and the new price highlighted. The old price is in an s element with hidden text saying Was, so screen readers read Was $120, now $90.
A product card with colour swatches as radio buttons, so shoppers can pick a variant before adding to cart. Each swatch has a hidden colour name and a ring when selected, using has-[:checked]: on its label.
A product image that reveals Quick view and Wishlist buttons on hover and on focus-within, so keyboard users can reach them too. The buttons sit on the image with a translucent bar and fade in using group-hover: and group-focus-within:.
A product row as it appears in a cart: thumbnail, name, variant, quantity control and line price, with a remove link. The quantity input and remove button are named after the product, so several rows stay distinguishable.
A wide featured product block with the image on one side and details, price and two actions on the other, stacking on phones. It suits a homepage spotlight and uses md:grid-cols-2 for the two-column layout.
View code
<article class="grid w-full max-w-2xl overflow-hidden rounded-3xl border border-slate-800 bg-slate-900 md:grid-cols-2">
<div class="min-h-[180px] bg-gradient-to-br from-emerald-500 to-teal-900"></div>
<div class="p-6"><p class="text-xs font-bold uppercase tracking-wider text-emerald-300">New this week</p><h3 class="mt-1 text-2xl font-extrabold text-white">Forest dinner set</h3><p class="mt-2 text-sm leading-relaxed text-slate-400">Four plates and four bowls in a deep green glaze.</p><b class="mt-4 block text-2xl text-white">$140</b>
<div class="mt-4 flex flex-wrap gap-2"><button class="rounded-lg bg-emerald-400 px-4 py-2.5 text-sm font-bold text-emerald-950">Add to cart</button><a href="#" class="rounded-lg border border-slate-600 px-4 py-2.5 text-sm font-bold text-white">Details</a></div></div>
</article>
About these Tailwind Product Cards
Name buttons after the product
On a grid of products, Add to cart buttons all look the same. An aria-label such as Add Linen tote to cart tells screen reader users which product each one adds.
Sale prices
Put the old price in an s element with hidden text Was and the new one with hidden text now, so the change reads clearly aloud.
Hover actions for keyboards
Actions revealed on hover must also appear on group-focus-within, or keyboard users can never reach them.
Numbers that align
tabular-nums keeps prices the same width so they line up in grids and cart rows.
Frequently asked questions
Do these need JavaScript?
No. Connect the buttons to your cart logic.
How do I show real product photos?
Replace the gradient blocks with img elements using object-cover and descriptive alt text.