Responsive Product Card Html Css Codepen [verified] Jun 2026

Try adding a "Sale" badge using a pseudo-element ( ::before ) on the image container, or swap the "Add to Cart" text for a cart icon when the screen gets very small.

HTML * * * Responsive Product card grid * Tailwind CSS * * * * * * * [image: Product] * * Brand * responsive product card html css codepen

/* main container */ .shop-container max-width: 1400px; width: 100%; margin: 0 auto; Try adding a "Sale" badge using a pseudo-element

// Add to cart button simulated alert (shows demo interactivity but not intrusive) const cartBtns = document.querySelectorAll('.add-to-cart'); cartBtns.forEach(btn => btn.addEventListener('click', (e) => ); ); )(); </script> </body> </html> margin: 0 auto

.reviews font-size: 0.7rem; color: #7c8ba0;

.blog-header .badge display: inline-block; background: rgba(0, 110, 230, 0.12); backdrop-filter: blur(4px); padding: 0.3rem 1rem; border-radius: 60px; font-size: 0.85rem; font-weight: 500; color: #0066cc; margin-bottom: 1rem; letter-spacing: 0.3px;

/* ----- RESPONSIVE PRODUCT GRID (CSS Grid) ----- */ .product-grid display: grid; gap: 2rem; /* MOBILE FIRST: 1 column */ grid-template-columns: 1fr;