shopping

Online shopping will help us find the things we want using our phone or computer and have them delivered to us.

This tailwind example is contributed by Nishimwe Jeanine, on 29-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Shopping cart

Author Nishimwe Jeanine

119

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShopOnline - Your Favorite Store</title>
    <style>
        /* CSS Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        a {
            text-decoration: none;
            color: inherit;
        }
        
        ul {
            list-style: none;
        }
        
        /* Header Styles */
        header {
            background-color: #2c3e50;
            color: white;
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            color: #ecf0f1;
        }
        
        .logo span {
            color: #e74c3c;
        }
        
        nav ul {
            display: flex;
        }
        
        nav ul li {
            margin-left: 1.5rem;
        }
        
        nav ul li a {
            padding: 0.5rem;
            transition: color 0.3s;
        }
        
        nav ul li a:hover {
            color: #e74c3c;
        }
        
        .cart-icon {
            position: relative;
        }
        
        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: #e74c3c;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.7rem;
        }
        
        /* Hero Section */
        .hero {
            background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://via.placeholder.com/1200x400');
            background-size: cover;
            background-position: center;
            height: 400px;
            display: flex;
            align-items: center;
            color: white;
            text-align: center;
        }
        
        .hero-content {
            width: 100%;
        }
        
        .hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .btn {
            display: inline-block;
            background-color: #e74c3c;
            color: white;
            padding: 0.8rem 1.8rem;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #c0392b;
        }
        
        /* Products Section */
        .products {
            padding: 4rem 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .section-title h2 {
            font-size: 2.2rem;
            color: #2c3e50;
            margin-bottom: 1rem;
        }
        
        .section-title p {
            color: #7f8c8d;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 2rem;
        }
        
        .product-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .product-image {
            height: 200px;
            overflow: hidden;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .product-card:hover .product-image img {
            transform: scale(1.05);
        }
        
        .product-info {
            padding: 1.5rem;
        }
        
        .product-info h3 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            color: #2c3e50;
        }
        
        .product-info p {
            color: #7f8c8d;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }
        
        .product-price {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .price {
            font-weight: bold;
            color: #e74c3c;
            font-size: 1.2rem;
        }
        
        .add-to-cart {
            background-color: #2c3e50;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .add-to-cart:hover {
            background-color: #1a252f;
        }
        
        /* Footer */
        footer {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 3rem 0 1rem;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }
        
        .footer-column h3 {
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.5rem;
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 2px;
            background-color: #e74c3c;
        }
        
        .footer-column ul li {
            margin-bottom: 0.8rem;
        }
        
        .footer-column ul li a {
            transition: color 0.3s;
        }
        
        .footer-column ul li a:hover {
            color: #e74c3c;
        }
        
        .social-links {
            display: flex;
            gap: 1rem;
        }
        
        .social-links a {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #34495e;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.3s;
        }
        
        .social-links a:hover {
            background-color: #e74c3c;
        }
        
        .copyright {
            text-align: center;
            padding-top: 1.5rem;
            border-top: 1px solid #34495e;
            font-size: 0.9rem;
            color: #bdc3c7;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                text-align: center;
            }
            
            nav ul {
                margin-top: 1rem;
            }
            
            .hero h1 {
                font-size: 2.2rem;
            }
            
            .product-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
        }
        
        @media (max-width: 480px) {
            nav ul li {
                margin-left: 0.8rem;
            }
            
            .hero h1 {
                font-size: 1.8rem;
            }
            
            .product-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    
    <header>
        <div class="container">
            <div class="header-content">
                <a href="#" class="logo">Shop<span>Online</span></a>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Shop</a></li>
                        <li><a href="#">Categories</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li>
                            <a href="#" class="cart-icon">
                                <i>🛒</i>
                                <span class="cart-count">3</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Welcome to ShopOnline</h1>
                <p>Discover amazing products at unbeatable prices. Shop now and get free shipping on orders over $50!</p>
                <a href="#" class="btn">Shop Now</a>
            </div>
        </div>
    </section>

<section class="products">
        <div class="container">
            <div class="section-title">
                <h2>Featured Products</h2>
                <p>Check out our most popular products this week</p>
            </div>
            
            <div class="product-grid">
                
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://via.placeholder.com/300x200" alt="Product 1">
                    </div>
                    <div class="product-info">
                        <h3>Wireless Headphones</h3>
                        <p>Premium sound quality with noise cancellation feature.</p>
                        <div class="product-price">
                            <span class="price">$99.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
                
                
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://via.placeholder.com/300x200" alt="Product 2">
                    </div>
                    <div class="product-info">
                        <h3>Smart Watch</h3>
                        <p>Track your fitness and stay connected on the go.</p>
                        <div class="product-price">
                            <span class="price">$149.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
                
                
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://via.placeholder.com/300x200" alt="Product 3">
                    </div>
                    <div class="product-info">
                        <h3>Bluetooth Speaker</h3>
                        <p>Portable speaker with 20 hours of battery life.</p>
                        <div class="product-price">
                            <span class="price">$59.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
                
                
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://via.placeholder.com/300x200" alt="Product 4">
                    </div>
                    <div class="product-info">
                        <h3>Wireless Charger</h3>
                        <p>Fast charging pad compatible with all Qi devices.</p>
                        <div class="product-price">
                            <span class="price">$29.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>ShopOnline</h3>
                    <p>Your one-stop shop for all the latest products and trends. We offer quality products at affordable prices.</p>
                    <div class="social-links">
                        <a href="#"><i>📱</i></a>
                        <a href="#"><i>📘</i></a>
                        <a href="#"><i>📸</i></a>
                        <a href="#"><i>🐦</i></a>
                    </div>
                </div>
                
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Shop</a></li>
                        <li><a href="#">Categories</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                
                <div class="footer-column">
                    <h3>Customer Service</h3>
                    <ul>
                        <li><a href="#">My Account</a></li>
                        <li><a href="#">Order Tracking</a></li>
                        <li><a href="#">Wishlist</a></li>
                        <li><a href="#">Shipping Policy</a></li>
                        <li><a href="#">Returns & Refunds</a></li>
                    </ul>
                </div>
                
                <div class="footer-column">
                    <h3>Contact Us</h3>
                    <ul>
                        <li><i>📍</i> 123 Street, City, Country</li>
                        <li><i>📞</i> +1 234 567 890</li>
                        <li><i>✉️</i> info@shoponline.com</li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2023 ShopOnline. All Rights Reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>

Related Examples