Coffee

custom

This tailwind example is contributed by Rebecca IRANKUNDA, on 27-May-2025. Component is made with Tailwind v3.4. It is responsive.

Header

Author Rebecca IRANKUNDA

Tailwind v3.4 1.5k 5

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brew Haven Coffee</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        
        body {
            background-color: #f9f5f0;
            color: #3a2e26;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header Styles */
        header {
            background-color: #3a2e26;
            color: white;
            padding: 20px 0;
            position: fixed;
            width: 100%;
            z-index: 100;
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 28px;
            font-weight: 700;
            color: #d4a762;
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 30px;
        }
        
        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        nav ul li a:hover {
            color: #d4a762;
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            background: url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085') no-repeat center center/cover;
            display: flex;
            align-items: center;
            text-align: center;
            color: white;
            padding-top: 80px;
            position: relative;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .hero p {
            font-size: 20px;
            margin-bottom: 30px;
        }
        
        .btn {
            display: inline-block;
            background-color: #d4a762;
            color: white;
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #c49555;
        }
        
        /* About Section */
        .about {
            padding: 100px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
            font-size: 36px;
            color: #3a2e26;
        }
        
        .about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        
        .about-text {
            flex: 1;
        }
        
        .about-image {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .about-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* Menu Section */
        .menu {
            padding: 100px 0;
            background-color: #f0e6d9;
        }
        
        .menu-items {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .menu-item {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .menu-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .menu-item-content {
            padding: 20px;
        }
        
        .menu-item h3 {
            font-size: 22px;
            margin-bottom: 10px;
            color: #3a2e26;
        }
        
        .menu-item p {
            margin-bottom: 15px;
            color: #6c757d;
        }
        
        .price {
            font-size: 20px;
            font-weight: 700;
            color: #d4a762;
        }
        
        /* Footer */
        footer {
            background-color: #3a2e26;
            color: white;
            padding: 50px 0 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .footer-column h3 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #d4a762;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 10px;
        }
        
        .footer-column ul li a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-column ul li a:hover {
            color: #d4a762;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
        }
        
        .social-links a {
            color: white;
            font-size: 20px;
            transition: color 0.3s;
        }
        
        .social-links a:hover {
            color: #d4a762;
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Responsive Styles */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
            }
            
            nav ul {
                margin-top: 20px;
            }
            
            nav ul li {
                margin-left: 15px;
                margin-right: 15px;
            }
            
            .about-content {
                flex-direction: column;
            }
            
            .hero h1 {
                font-size: 36px;
            }
            
            .hero p {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    
    <header>
        <div class="container header-container">
            <div class="logo">Brew Haven</div>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#menu">Menu</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Artisanal Coffee Crafted With Love</h1>
            <p>Discover our handcrafted coffee blends made from the finest beans sourced from around the world</p>
            <a href="#menu" class="btn">View Our Menu</a>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <h2 class="section-title">Our Story</h2>
            <div class="about-content">
                <div class="about-text">
                    <p>Founded in 2010, Brew Haven began as a small coffee cart in downtown Portland. Our passion for quality coffee and community quickly grew into what is now a beloved local coffee shop.</p>
                    <p>We directly source our beans from sustainable farms and roast them in small batches to ensure maximum freshness and flavor. Every cup tells a story of craftsmanship and care.</p>
                    <p>Our baristas are trained in the art of coffee making, ensuring each beverage is prepared to perfection. We believe coffee is more than a drink - it's an experience.</p>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1445116572660-236099ec97a0" alt="Coffee beans">
                </div>
            </div>
        </div>
    </section>

<section class="menu" id="menu">
        <div class="container">
            <h2 class="section-title">Our Menu</h2>
            <div class="menu-items">
                <div class="menu-item">
                    <img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5" alt="Espresso">
                    <div class="menu-item-content">
                        <h3>Espresso</h3>
                        <p>A concentrated coffee beverage brewed by forcing hot water under pressure through finely ground coffee.</p>
                        <div class="price">$3.50</div>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://images.unsplash.com/photo-1551030173-122aabc4489c" alt="Cappuccino">
                    <div class="menu-item-content">
                        <h3>Cappuccino</h3>
                        <p>Espresso with steamed milk and a silky layer of foam, traditionally prepared with equal parts of each.</p>
                        <div class="price">$4.50</div>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://images.unsplash.com/photo-1568649929103-28ffbefaca1e" alt="Cold Brew">
                    <div class="menu-item-content">
                        <h3>Cold Brew</h3>
                        <p>Our signature cold brew steeped for 18 hours for a smooth, rich flavor with lower acidity.</p>
                        <div class="price">$4.75</div>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://images.unsplash.com/photo-1572442388796-11668a67e53d" alt="Pour Over">
                    <div class="menu-item-content">
                        <h3>Pour Over</h3>
                        <p>Handcrafted single-origin coffee brewed to order for maximum flavor clarity.</p>
                        <div class="price">$5.00</div>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://images.unsplash.com/photo-1560717843-60cb77a8a8d1" alt="Latte">
                    <div class="menu-item-content">
                        <h3>Latte</h3>
                        <p>Espresso with a generous amount of steamed milk and a light layer of foam.</p>
                        <div class="price">$4.75</div>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://images.unsplash.com/photo-1514066558159-fc8c737ef259" alt="Iced Coffee">
                    <div class="menu-item-content">
                        <h3>Iced Coffee</h3>
                        <p>Our house blend chilled and served over ice with your choice of milk.</p>
                        <div class="price">$4.25</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer id="contact">
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Brew Haven</h3>
                    <p>Artisanal coffee crafted with love. Serving the community since 2010.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Hours</h3>
                    <ul>
                        <li>Monday - Friday: 6am - 8pm</li>
                        <li>Saturday: 7am - 9pm</li>
                        <li>Sunday: 7am - 6pm</li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Contact</h3>
                    <ul>
                        <li>123 Coffee Lane, Portland, OR</li>
                        <li>0787985412</li>
                        <li>rebeccairankunda789@gmail.com</li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 Brew Haven Coffee. All rights reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>

Related Examples

Responsive Header and Hero Section Design
Responsive Header and Hero Section Design provides flexible adaptability across all screen sizes and devices.

ABDO-SY

1 year ago

3.6k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.5k
Heade With Hero Section

Abdul Baset Bappy

1 year ago

1.9k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.9k
Responsive Navbar
Tailwind Navbar

Md. Tofayel islam

2 years ago

8.5k
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Mike Varen

2 years ago

4.8k
Transparent Navbar

Rajesh Maheshwari

1 year ago

2.6k
Animated Title
App Logo or Main Title

khalidrootdevs

2 years ago

7.6k
Markert shop
wellcome tothe my online shoping

Umutoniwase Yvette

1 year ago

1.1k
Basic sidebar

Rajesh Maheshwari

1 year ago

2.7k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Nicole Shalom

1 year ago

1.8k
Pixel Blast
Pixel Blast

Raul antonio de la cruz hernandez

11 months ago

1.3k