Responsive Product Card Html - Css Codepen

.current-price font-size: 1.5rem; font-weight: 700; color: #0f172a;

built with Tailwind, featuring a smooth scale-up hover effect and clear pricing. Bootstrap 5 Minimalist: E-commerce Minimal Responsive Card

<!-- CARD 5 - Ceramic Plant Pot (eco) --> <div class="product-card"> <div class="card-img"> <img src="https://images.unsplash.com/photo-1485955900006-10f4d324d411?w=500&auto=format" alt="Handmade ceramic pot" loading="lazy"> <div class="fav-icon" aria-label="Add to wishlist"><i class="far fa-heart"></i></div> </div> <div class="card-content"> <div class="product-category">Home & Living</div> <h3 class="product-title">Terra Cotta Planter</h3> <div class="rating"> <div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div> <span class="review-count">(64 reviews)</span> </div> <div class="price-wrapper"> <span class="current-price">$28.90</span> <span class="old-price">$39.00</span> <span class="installments">eco-friendly</span> </div> <button class="add-to-cart"><i class="fas fa-shopping-cart"></i> Add to cart</button> </div> </div> responsive product card html css codepen

You can see the finished in action below. (In a real article, you would embed the live pen using CodePen’s embed code. For this text, I describe its features.)

<!-- CARD 2 - Minimal Backpack --> <div class="product-card"> <div class="card-img"> <img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=500&auto=format" alt="Modern backpack" loading="lazy"> <div class="fav-icon" aria-label="Add to wishlist"><i class="far fa-heart"></i></div> </div> <div class="card-content"> <div class="product-category">Accessories</div> <h3 class="product-title">Apex Backpack 22L</h3> <div class="rating"> <div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></div> <span class="review-count">(89 reviews)</span> </div> <div class="price-wrapper"> <span class="current-price">$64.50</span> <span class="old-price">$79.00</span> <span class="installments">free shipping</span> </div> <button class="add-to-cart"><i class="fas fa-shopping-cart"></i> Add to cart</button> </div> </div> For this text, I describe its features

// store original text / state const originalTexts = new Map();

/* hover */ .product-card:hover transform:translateY(-6px); box-shadow:0 12px 30px rgba(2,6,23,0.12); On a tablet, two cards side by side

.product-image width: 100%; overflow: hidden;

That’s it! You now have a fully responsive product card layout. On a phone, users see one card per row, easy to tap. On a tablet, two cards side by side. On a desktop, three or four cards, depending on screen size.

@media (max-width: 480px) .product-card flex-direction: column;

.card-badge position: absolute; top: 10px; left: 10px; background: #ef4444; color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; z-index: 10;