Cafee shop

help to buy something that can help you to relax

This tailwind example is contributed by INGRIDE MUZIRANENGE, on 22-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author INGRIDE MUZIRANENGE

360

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee & Tea - Artisanal Coffee & Premium Tea Blends</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        .font-cursive {
            font-family: 'Dancing Script', cursive;
        }
        
        .font-sans {
            font-family: 'Poppins', sans-serif;
        }
        
        .hero-container {
            position: relative;
            height: 100vh;
            max-height: 800px;
            overflow: hidden;
        }
        
        .hero-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            z-index: 1;
        }
        
        .hero-slide.active {
            opacity: 1;
        }
        
        .hero-slide::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
        }
        
        .menu-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .feature-card {
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .contact-form input,
        .contact-form textarea {
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
        }
        
        .contact-form input:focus,
        .contact-form textarea:focus {
            outline: none;
            border-color: #b45309;
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        .contact-form input::placeholder,
        .contact-form textarea::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
    </style>
</head>
<body class="font-sans bg-amber-50">
    
    <nav class="bg-amber-900 text-white shadow-lg sticky top-0 z-50">
        <div class="container mx-auto px-6 py-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-4">
                    <a href="index.html" class="font-cursive text-3xl">Coffee & Tea</a>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="text-amber-200 hover:text-white">Home</a>
                    <a href="#menu" class="hover:text-amber-200">Menu</a>
                    <a href="#about" class="hover:text-amber-200">About</a>
                    <a href="#contact" class="hover:text-amber-200">Contact</a>
                    <a href="#" class="bg-amber-700 hover:bg-amber-600 px-4 py-2 rounded-lg">Order Online</a>
                </div>
                <div class="md:hidden">
                    <button id="mobile-menu-button" class="text-white focus:outline-none">
                        <i class="fas fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>
            
            <div id="mobile-menu" class="md:hidden hidden mt-4 pb-4">
                <a href="index.html" class="block py-2 text-amber-200">Home</a>
                <a href="#menu" class="block py-2 hover:text-amber-200">Menu</a>
                <a href="#about" class="block py-2 hover:text-amber-200">About</a>
                <a href="#contact" class="block py-2 hover:text-amber-200">Contact</a>
                <a href="#" class="block mt-2 bg-amber-700 hover:bg-amber-600 px-4 py-2 rounded-lg w-max">Order Online</a>
            </div>
        </div>
    </nav>

<section class="hero-container">
        
        <div class="hero-slide active" style="background-image: url('https://images.unsplash.com/photo-1445116572660-236099ec97a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80');"></div>
        <div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
        <div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80');"></div>
        <div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
        <div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1558160074-4d7d8bdf4256?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
        
        
        <div class="hero-content flex items-center justify-center h-full text-center text-white py-32 px-6">
            <div class="container mx-auto">
                <h1 class="font-cursive text-5xl md:text-7xl mb-6">Coffee & Tea</h1>
                <p class="text-xl md:text-2xl mb-8">Artisanal Coffee & Premium Tea Blends</p>
                <a href="#menu" class="bg-amber-700 hover:bg-amber-600 text-white px-8 py-3 rounded-lg text-lg font-semibold">View Our Menu</a>
            </div>
        </div>
    </section>

<section id="menu" class="py-16 bg-amber-50">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center text-amber-900 mb-4">Our Menu</h2>
            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Discover our carefully crafted selection of artisanal coffees and premium teas from around the world.</p>
            
            
            <div class="mb-16">
                <h3 class="text-2xl font-semibold text-amber-800 mb-6 flex items-center">
                    <i class="fas fa-coffee mr-3"></i> Coffee Selection
                </h3>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Rwandan Bourbon</h4>
                            <span class="text-amber-700 font-bold">2,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">A smooth, well-balanced coffee with notes of citrus and chocolate, grown in the volcanic soils of Rwanda.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot/Iced</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Espresso</h4>
                            <span class="text-amber-700 font-bold">2,000 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Our signature espresso blend with rich crema, caramel sweetness, and a smooth finish.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Single/Double</span>
                            <span>1oz / 2oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Cappuccino</h4>
                            <span class="text-amber-700 font-bold">3,000 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Espresso with steamed milk and a silky layer of foam, dusted with cocoa or cinnamon.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Regular/Large</span>
                            <span>8oz / 12oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Iced Latte</h4>
                            <span class="text-amber-700 font-bold">3,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Espresso chilled with milk and ice, customizable with flavored syrups.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Regular/Large</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Mocha</h4>
                            <span class="text-amber-700 font-bold">3,800 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Espresso blended with rich chocolate and steamed milk, topped with whipped cream.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Regular/Large</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Cold Brew</h4>
                            <span class="text-amber-700 font-bold">3,200 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Slow-steeped for 18 hours for a smooth, less acidic coffee experience.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Regular/Large</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="mb-16">
                <h3 class="text-2xl font-semibold text-amber-800 mb-6 flex items-center">
                    <i class="fas fa-leaf mr-3"></i> Tea Selection
                </h3>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Rwandan Green Tea</h4>
                            <span class="text-amber-700 font-bold">2,000 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Premium green tea grown in the highlands of Rwanda, with fresh grassy notes.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot/Iced</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Earl Grey</h4>
                            <span class="text-amber-700 font-bold">2,200 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Classic black tea flavored with bergamot oil, aromatic and refreshing.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot/Iced</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Chamomile</h4>
                            <span class="text-amber-700 font-bold">2,000 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Caffeine-free herbal tea with calming properties and a mild apple-like flavor.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot Only</span>
                            <span>12oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Masala Chai</h4>
                            <span class="text-amber-700 font-bold">2,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Spiced black tea with cinnamon, cardamom, ginger, and cloves, served with milk.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot Only</span>
                            <span>12oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Rooibos</h4>
                            <span class="text-amber-700 font-bold">2,200 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Caffeine-free South African herbal tea with a naturally sweet, nutty flavor.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot/Iced</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Matcha Latte</h4>
                            <span class="text-amber-700 font-bold">3,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Premium Japanese matcha powder whisked with steamed milk for a creamy texture.</p>
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>Hot/Iced</span>
                            <span>12oz / 16oz</span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div>
                <h3 class="text-2xl font-semibold text-amber-800 mb-6 flex items-center">
                    <i class="fas fa-bread-slice mr-3"></i> Pastries & Snacks
                </h3>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Croissant</h4>
                            <span class="text-amber-700 font-bold">2,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Buttery, flaky French-style croissant, plain or with chocolate filling.</p>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Banana Bread</h4>
                            <span class="text-amber-700 font-bold">2,000 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Moist homemade banana bread with walnuts, served warm.</p>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Muffin</h4>
                            <span class="text-amber-700 font-bold">2,200 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Daily selection of blueberry, chocolate, or bran muffins.</p>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Avocado Toast</h4>
                            <span class="text-amber-700 font-bold">4,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Sourdough bread with smashed avocado, cherry tomatoes, and chili flakes.</p>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Fruit Salad</h4>
                            <span class="text-amber-700 font-bold">3,500 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Seasonal fresh fruits with optional yogurt and honey.</p>
                    </div>
                    
                    
                    <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-xl font-semibold">Cheese Sandwich</h4>
                            <span class="text-amber-700 font-bold">4,800 RWF</span>
                        </div>
                        <p class="text-gray-600 mb-4">Grilled sandwich with local cheese, tomatoes, and herbs.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="py-16 bg-amber-900 text-white">
        <div class="container mx-auto px-6">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-12">
                    <h2 class="text-3xl font-bold mb-6">Our Story</h2>
                    <p class="mb-4">Founded in 2018 in the heart of Rwanda, Coffee & Tea began as a small passion project between two friends who shared a love for quality beverages and community spaces.</p>
                    <p class="mb-4">We source our coffee beans directly from Rwandan farmers in the volcanic regions, ensuring fair trade practices and supporting local agriculture. Our teas are carefully selected from the finest gardens around the world.</p>
                    <p class="mb-6">What started as a modest café has grown into a beloved gathering place where people come not just for exceptional drinks, but for the warm atmosphere and sense of connection.</p>
                    <div class="flex space-x-4">
                        <div class="bg-amber-800 p-4 rounded-lg text-center flex-1">
                            <div class="text-3xl font-bold mb-1">5+</div>
                            <div class="text-sm">Years in Business</div>
                        </div>
                        <div class="bg-amber-800 p-4 rounded-lg text-center flex-1">
                            <div class="text-3xl font-bold mb-1">12</div>
                            <div class="text-sm">Local Farmers</div>
                        </div>
                        <div class="bg-amber-800 p-4 rounded-lg text-center flex-1">
                            <div class="text-3xl font-bold mb-1">50+</div>
                            <div class="text-sm">Happy Employees</div>
                        </div>
                    </div>
                </div>
                <div class="lg:w-1/2">
                    <div class="relative rounded-xl overflow-hidden shadow-2xl">
                        <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" 
                             alt="Coffee shop interior"
                             class="w-full h-auto">
                        <div class="absolute inset-0 bg-gradient-to-t from-amber-900/80 to-transparent flex items-end p-6">
                            <div>
                                <h3 class="text-xl font-semibold mb-2">Our Café in Rutsiro</h3>
                                <p class="text-sm">Visit us at our flagship location in Bwiza, Rutsiro</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="mt-16">
                <h2 class="text-3xl font-bold text-center mb-12">Meet Our Team</h2>
                <div class="grid md:grid-cols-3 gap-8">
                    
                    <div class="bg-amber-800 rounded-lg overflow-hidden shadow-lg">
                        <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1361&q=80" 
                             alt="Anne Dukundimana"
                             class="w-full h-64 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-1">Anne Dukundimana</h3>
                            <p class="text-amber-200 mb-3">Founder & Head Barista</p>
                            <p class="text-sm">Anne's passion for coffee began during her travels through East Africa's coffee regions. She oversees our coffee sourcing and barista training.</p>
                        </div>
                    </div>
                    
                    
                    <div class="bg-amber-800 rounded-lg overflow-hidden shadow-lg">
                        <img src="https://images.unsplash.com/photo-1562788869-4ed32648eb72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                             alt="Noela"
                             class="w-full h-64 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-1">Noela</h3>
                            <p class="text-amber-200 mb-3">Tea Specialist</p>
                            <p class="text-sm">Noela curates our tea selection and develops unique blends. Her knowledge of tea traditions from around the world is unparalleled.</p>
                        </div>
                    </div>
                    
                    
                    <div class="bg-amber-800 rounded-lg overflow-hidden shadow-lg">
                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1588&q=80" 
                             alt="Jean Paul"
                             class="w-full h-64 object-cover">
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-1">Jean Paul</h3>
                            <p class="text-amber-200 mb-3">Pastry Chef</p>
                            <p class="text-sm">Jean Paul brings French pastry techniques to Rwandan ingredients, creating our delicious selection of baked goods.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="py-16 bg-amber-800 text-white">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12">Contact Us</h2>
            
            <div class="flex flex-col lg:flex-row gap-12">
                
                <div class="lg:w-1/2">
                    <form class="contact-form space-y-6">
                        <div>
                            <label for="name" class="block mb-2">Your Name</label>
                            <input type="text" id="name" placeholder="Enter your name" 
                                   class="w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
                        </div>
                        
                        <div>
                            <label for="email" class="block mb-2">Email Address</label>
                            <input type="email" id="email" placeholder="Enter your email" 
                                   class="w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
                        </div>
                        
                        <div>
                            <label for="phone" class="block mb-2">Phone Number</label>
                            <input type="tel" id="phone" placeholder="Enter your phone number" 
                                   class="w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
                        </div>
                        
                        <div>
                            <label for="message" class="block mb-2">Your Message</label>
                            <textarea id="message" rows="5" placeholder="How can we help you?" 
                                      class="w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
                        </div>
                        
                        <button type="submit" class="bg-amber-700 hover:bg-amber-600 text-white px-6 py-3 rounded-lg font-semibold w-full">
                            Send Message
                        </button>
                    </form>
                </div>
                
                
                <div class="lg:w-1/2">
                    <div class="bg-amber-900/50 rounded-xl p-8 h-full">
                        <h3 class="text-2xl font-semibold mb-6">Get in Touch</h3>
                        
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="text-amber-300 text-xl mt-1 mr-4">
                                    <i class="fas fa-map-marker-alt"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">Location</h4>
                                    <p>Bwiza Center, Rutsiro<br>Rwanda</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="text-amber-300 text-xl mt-1 mr-4">
                                    <i class="fas fa-envelope"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">Email</h4>
                                    <a href="mailto:annedukundimana@gmail.com" class="hover:text-amber-200">annedukundimana@gmail.com</a>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="text-amber-300 text-xl mt-1 mr-4">
                                    <i class="fas fa-phone-alt"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">Phone</h4>
                                    <p>+250 79 *******</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="text-amber-300 text-xl mt-1 mr-4">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-1">Opening Hours</h4>
                                    <p>Monday - Friday: 7:00 AM - 8:00 PM<br>
                                    Saturday: 8:00 AM - 9:00 PM<br>
                                    Sunday: 9:00 AM - 6:00 PM</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="text-amber-300 text-xl mt-1 mr-4">
                                    <i class="fas fa-share-alt"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-3">Follow Us</h4>
                                    <div class="flex space-x-4">
                                        <a href="#" class="text-amber-300 hover:text-white text-2xl">
                                            <i class="fab fa-facebook"></i>
                                        </a>
                                        <a href="#" class="text-amber-300 hover:text-white text-2xl">
                                            <i class="fab fa-instagram"></i>
                                        </a>
                                        <a href="#" class="text-amber-300 hover:text-white text-2xl">
                                            <i class="fab fa-twitter"></i>
                                        </a>
                                        <a href="#" class="text-amber-300 hover:text-white text-2xl">
                                            <i class="fab fa-whatsapp"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="mt-16 rounded-xl overflow-hidden shadow-2xl">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3987.634075490593!2d29.28472981475393!3d-1.944298998633664!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x19dc3b1a0f0a1a3b%3A0xf8b1b3d3f3f3f3f4!2sRutsiro%2C%20Rwanda!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" 
                        width="100%" 
                        height="450" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy"
                        class="rounded-xl"></iframe>
            </div>
        </div>
    </section>

<section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center text-amber-900 mb-12">Why Choose Us</h2>
            <div class="grid md:grid-cols-3 gap-8">
                
                <div class="feature-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/
                                                <img src="https://images.unsplash.com/photo-1453614512568-c4024d13c247?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" 
                             alt="Fresh Ingredients"
                             class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <div class="text-amber-600 text-3xl mb-4">
                            <i class="fas fa-seedling"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">Premium Ingredients</h3>
                        <p class="text-gray-600">We source only the finest coffee beans and tea leaves, working directly with local Rwandan farmers and international suppliers who share our commitment to quality.</p>
                    </div>
                </div>
                
                
                <div class="feature-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                             alt="Skilled Baristas"
                             class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <div class="text-amber-600 text-3xl mb-4">
                            <i class="fas fa-mug-hot"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">Expert Preparation</h3>
                        <p class="text-gray-600">Our baristas undergo rigorous training to master both traditional techniques and innovative brewing methods, ensuring every cup meets our high standards.</p>
                    </div>
                </div>
                
                
                <div class="feature-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" 
                             alt="Cozy Atmosphere"
                             class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <div class="text-amber-600 text-3xl mb-4">
                            <i class="fas fa-heart"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">Warm Atmosphere</h3>
                        <p class="text-gray-600">Our café is designed to be a welcoming space where you can relax, work, or connect with others while enjoying your favorite beverage.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-amber-50">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center text-amber-900 mb-12">What Our Customers Say</h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="text-amber-500 text-2xl mr-2">
                            <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="fas fa-star"></i>
                        </div>
                    </div>
                    <p class="text-gray-600 mb-6">"The Rwandan Bourbon coffee is simply exceptional. I come here every morning before work and it's the perfect start to my day. The staff remembers my order and always greets me with a smile."</p>
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" 
                             alt="Customer"
                             class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h4 class="font-semibold">Alexis N.</h4>
                            <p class="text-sm text-gray-500">Regular Customer</p>
                        </div>
                    </div>
                </div>
                
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="text-amber-500 text-2xl mr-2">
                            <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="fas fa-star"></i>
                        </div>
                    </div>
                    <p class="text-gray-600 mb-6">"As a tea enthusiast, I appreciate their extensive selection and knowledgeable staff. Noela helped me discover several new favorites. The chamomile with local honey is my go-to for relaxation."</p>
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" 
                             alt="Customer"
                             class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h4 class="font-semibold">Marie Claire U.</h4>
                            <p class="text-sm text-gray-500">Tea Lover</p>
                        </div>
                    </div>
                </div>
                
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="text-amber-500 text-2xl mr-2">
                            <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="fas fa-star-half-alt"></i>
                        </div>
                    </div>
                    <p class="text-gray-600 mb-6">"The perfect place to work remotely. Great WiFi, comfortable seating, and amazing coffee. The avocado toast is delicious too! I've recommended this place to all my colleagues."</p>
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" 
                             alt="Customer"
                             class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h4 class="font-semibold">Eric K.</h4>
                            <p class="text-sm text-gray-500">Digital Nomad</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-amber-900 text-white">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-3xl font-bold mb-4">Join Our Community</h2>
            <p class="max-w-2xl mx-auto mb-8">Subscribe to our newsletter for exclusive offers, new product announcements, and coffee/tea brewing tips.</p>
            
            <form class="max-w-md mx-auto flex">
                <input type="email" placeholder="Your email address" 
                       class="flex-1 px-4 py-3 rounded-l-lg focus:outline-none text-gray-900">
                <button type="submit" class="bg-amber-700 hover:bg-amber-600 px-6 py-3 rounded-r-lg font-semibold">
                    Subscribe
                </button>
            </form>
            
            <div class="mt-8 flex justify-center space-x-6">
                <a href="#" class="text-white hover:text-amber-200 text-2xl">
                    <i class="fab fa-facebook"></i>
                </a>
                <a href="#" class="text-white hover:text-amber-200 text-2xl">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="#" class="text-white hover:text-amber-200 text-2xl">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="#" class="text-white hover:text-amber-200 text-2xl">
                    <i class="fab fa-whatsapp"></i>
                </a>
            </div>
        </div>
    </section>

<footer class="bg-amber-950 text-white py-12">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-8">
                
                <div>
                    <h3 class="font-cursive text-2xl mb-4">Coffee & Tea</h3>
                    <p class="mb-4">Artisanal coffee and premium tea blends in the heart of Rwanda.</p>
                    <p>© 2023 Coffee & Tea. All rights reserved.</p>
                </div>
                
                
                <div>
                    <h4 class="font-semibold text-lg mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="index.html" class="hover:text-amber-300">Home</a></li>
                        <li><a href="#menu" class="hover:text-amber-300">Menu</a></li>
                        <li><a href="#about" class="hover:text-amber-300">About Us</a></li>
                        <li><a href="#contact" class="hover:text-amber-300">Contact</a></li>
                        <li><a href="#" class="hover:text-amber-300">Order Online</a></li>
                    </ul>
                </div>
                
                
                <div>
                    <h4 class="font-semibold text-lg mb-4">Information</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-amber-300">Privacy Policy</a></li>
                        <li><a href="#" class="hover:text-amber-300">Terms of Service</a></li>
                        <li><a href="#" class="hover:text-amber-300">Shipping Policy</a></li>
                        <li><a href="#" class="hover:text-amber-300">Refund Policy</a></li>
                        <li><a href="#" class="hover:text-amber-300">FAQ</a></li>
                    </ul>
                </div>
                
                
                <div>
                    <h4 class="font-semibold text-lg mb-4">Contact Info</h4>
                    <address class="not-italic">
                        <p class="mb-2">Bwiza Center, Rutsiro</p>
                        <p class="mb-2">Rwanda</p>
                        <p class="mb-2">Email: <a href="mailto:annedukundimana@gmail.com" class="hover:text-amber-300">annedukundimana@gmail.com</a></p>
                        <p>Phone: +250 79 *******</p>
                    </address>
                </div>
            </div>
            
            <div class="border-t border-amber-800 mt-12 pt-8 text-center text-sm text-gray-400">
                <p>All images used are for demonstration purposes only. All content is property of Coffee & Tea unless otherwise noted.</p>
            </div>
        </div>
    </footer>

<button id="back-to-top" class="fixed bottom-8 right-8 bg-amber-700 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300">
        <i class="fas fa-arrow-up"></i>
    </button>

</body>
</html>

Related Examples

Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

16.9k
Full HTML Version
What's Included: Title*: Required input Description: Optional textarea Fully responsive and dark mode ready Simple validation (required on title)

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

244
Active Beauty Main Page

Author:
Maxim

2 months ago

325
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

2 months ago

318
portfolio
Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

Author:
Lekhraj Ghimire

4 days ago

20
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

2 months ago

356
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

4 weeks ago

42
trusted by
1. Color Scheme: 1. Updated the background to a gradient from Indigo-800 to Blue-900 2. Changed text colors to use Indigo-800 and Blue-900 shades 3. Updated ring colors on avatar images to match the new scheme 2. Enhanced Design: 1. Added a containing card with white background (dark gray in dark mode) 2. Increased the size of avatar images for better visibility 3. Added a shadow effect to the card that changes color on hover 3. Responsiveness: 1. Maintained the responsive layout, stacking vertically on smaller screens 4. Animations and Interactions: 1. Added a fade-in animation for the entire component 2. Enhanced hover effects on avatar images (scale and z-index change) 3. Added a ring effect on hover for each avatar 5. Accessibility: 1. Maintained alt text for images 2. Ensured proper color contrast for text readability 6. Dark Mode: 1. Implemented dark mode support 2. Adjusted colors and ring effects for dark mode 7. Additional Enhancements: 1. Increased font sizes for better readability 2. Added font weight variations to emphasize important text 3. Improved spacing and alignment This updated component maintains the original functionality while incorporating the Indigo-800 and Blue-900 color scheme and adding enhanced visual effects and interactions.

Author:
nejaa badr

7 months ago

1.1k
Hero

Author:
ORGIN_DREAMS

1 month ago

181
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

2 days ago

25
Track Your Order
Track Your Order

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

117
google clone page
This HTML page includes: The Google logo with the correct colors A search input field with microphone and camera icons "Google Search" and "Win Freeing Lucky" buttons The text "With new The ZGS Breakthrough Plus cabinets today's where business ?" Footer with all the links shown in the image: Advertising, Business, New Search works, Privacy, Terms, Settings The climate action text in the footer The layout is responsive and uses Tailwind CSS for styling. The colors match Google's brand colors, and the overall structure matches what's shown in the image.

Author:
Bishnu Thapa

2 months ago

147

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components