Responsive Product Card Html Css Codepen -

/* badge / discount tag (optional modern flair) */ .badge position: absolute; top: 1rem; left: 1rem; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); color: white; font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.85rem; border-radius: 40px; letter-spacing: 0.3px; z-index: 2; font-family: inherit;

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Responsive Product Card | Modern UI Component</title>  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet"> <style> * margin: 0; padding: 0; box-sizing: border-box;

/* CTA button - fully responsive touch friendly */ .btn-add background: #101d2f; color: white; border: none; border-radius: 60px; padding: 0.8rem 0; font-weight: 600; font-size: 0.9rem; font-family: 'Inter', sans-serif; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; width: 100%; responsive product card html css codepen

.badge.new background: #1f8a4c;

.discount-badge-text background: #fee2e2; color: #c2412c; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 30px; /* badge / discount tag (optional modern flair) */

.btn-add:active transform: scale(0.96);

body background: linear-gradient(145deg, #e9f0fc 0%, #d9e4f0 100%); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; padding: 0.3rem 0.85rem

/* price row */ .price-row display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.2rem;

/* extra responsive touches */ @media (max-width: 680px) body padding: 1.2rem; .card-content padding: 1.2rem 1rem 1.4rem; .product-title font-size: 1.2rem; .current-price font-size: 1.5rem;