Coffee

custom

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

Header

Author Rebecca IRANKUNDA

353

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

Full width header with gradient
Header component for showing Info.

Author:
TailwindFlex

3 years ago

13k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

1 month ago

440
Hero Section
Home hero section search bar

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

6.8k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

6 months ago

1.4k
yvette
vibes kbx

Author:
Umutoniwase Yvette

2 months ago

87
Job Platfoam
If you need a Job You will Have to Apply for it

Author:
soft mind

2 months ago

358
Home
html , css

Author:
Hacker Development

2 months ago

288
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.5k
Hero section
Hero section for your project

Author:
Prajwal Hallale

2 years ago

9k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

10 months ago

3k
Brutalist Hero

Author:
threehymns

8 months ago

1.9k
sticky headings
sticky headings

Author:
Anonymous

1 year ago

5.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components