Artisan Coffee Crafted with Care

Coffee is one of the world's most beloved beverages, enjoyed by millions daily. Here's an in-depth look at everything coffee-related.

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

Header Hover

Author matoleo chance

Tailwind v3.4 1.4k 8

Fork Fullscreen

<section id="home" class="relative h-screen flex items-center justify-center bg-coffee-900 text-white overflow-hidden">
        <img src="https://images.unsplash.com/photo-1445116572660-236099ec97a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" 
             alt="Coffee beans" 
             class="absolute w-full h-full object-cover opacity-50">
        <div class="relative z-10 text-center px-4">
            <h1 class="text-4xl md:text-6xl font-bold mb-6">Artisan Coffee Crafted with Care</h1>
            <p class="text-xl mb-8 max-w-2xl mx-auto">Discover the perfect blend of quality beans and expert brewing at Brew Haven</p>
            <div class="space-x-4">
                <a href="#menu" class="bg-coffee-500 text-white px-8 py-3 rounded-full font-bold hover:bg-coffee-600 transition duration-300 inline-block">View Menu</a>
                <a href="#contact" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-coffee-800 transition duration-300 inline-block">Visit Us</a>
            </div>
        </div>
    </section>

<section id="about" class="py-20 bg-coffee-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="md:flex items-center">
                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                    <h2 class="text-3xl font-bold text-coffee-800 mb-6">Our Story</h2>
                    <p class="text-coffee-700 mb-4">Founded in 2010, Brew Haven began as a small passion project between two coffee enthusiasts who wanted to share their love for specialty coffee with their community.</p>
                    <p class="text-coffee-700 mb-4">We source our beans directly from ethical farms around the world, ensuring fair compensation for farmers and the highest quality for our customers.</p>
                    <p class="text-coffee-700">Every cup is carefully crafted by our trained baristas who take pride in their art. We're not just serving coffee - we're creating experiences.</p>
                </div>
                <div class="md:w-1/2">
                    <div class="grid grid-cols-2 gap-4">
                        <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" 
                             alt="Coffee shop interior" 
                             class="rounded-lg shadow-lg h-64 w-full object-cover">
                        <img src="https://images.unsplash.com/photo-1461023058943-07fcbe16d735?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" 
                             alt="Barista making coffee" 
                             class="rounded-lg shadow-lg h-64 w-full object-cover">
                        <img src="https://images.unsplash.com/photo-1442512595331-e89e73853f31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                             alt="Coffee beans" 
                             class="rounded-lg shadow-lg h-64 w-full object-cover">
                        <img src="https://images.unsplash.com/photo-1498804103079-a6351b050096?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" 
                             alt="People enjoying coffee" 
                             class="rounded-lg shadow-lg h-64 w-full object-cover">
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="menu" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold text-center text-coffee-800 mb-12">Our Menu</h2>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold text-coffee-700 mb-6">Coffee Drinks</h3>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="coffee-menu">
                    
                </div>
            </div>
            
            <div>
                <h3 class="text-2xl font-semibold text-coffee-700 mb-6">Food & Pastries</h3>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="food-menu">
                    
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="py-20 bg-coffee-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold text-center text-coffee-800 mb-12">Visit Us</h2>
            
            <div class="md:flex">
                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-2xl font-semibold text-coffee-700 mb-4">Contact Information</h3>
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <i class="fas fa-map-marker-alt text-coffee-500 mt-1 mr-3"></i>
                                <p>123 Brew Street, Coffeeville, CA 90210</p>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-phone-alt text-coffee-500 mr-3"></i>
                                <p>(555) 123-4567</p>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-envelope text-coffee-500 mr-3"></i>
                                <p>hello@brewhaven.com</p>
                            </div>
                        </div>
                        
                        <h3 class="text-2xl font-semibold text-coffee-700 mt-8 mb-4">Hours</h3>
                        <div class="space-y-2">
                            <div class="flex justify-between">
                                <span>Monday - Friday</span>
                                <span>6:00 AM - 8:00 PM</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Saturday</span>
                                <span>7:00 AM - 9:00 PM</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Sunday</span>
                                <span>7:00 AM - 6:00 PM</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="md:w-1/2">
                    <div class="h-full w-full rounded-lg overflow-hidden">
                        <iframe 
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215209121995!2d-73.9878449245251!3d40.74844097138992!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1687897923902!5m2!1sen!2sus" 
                            width="100%" 
                            height="100%" 
                            style="border:0; min-height: 400px;" 
                            allowfullscreen="" 
                            loading="lazy" 
                            referrerpolicy="no-referrer-when-downgrade">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

<div class="fixed inset-y-0 right-0 w-full md:w-96 bg-white shadow-xl transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto" id="cart-sidebar">
        <div class="p-6">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold text-coffee-800">Your Order</h3>
                <button id="close-cart" class="text-coffee-500 hover:text-coffee-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="divide-y divide-coffee-200" id="cart-items">
                
                <p class="py-4 text-coffee-500" id="empty-cart-message">Your cart is empty</p>
            </div>
            <div class="mt-6 border-t border-coffee-200 pt-6">
                <div class="flex justify-between mb-2">
                    <span class="text-coffee-600">Subtotal</span>
                    <span class="font-bold" id="cart-subtotal">$0.00</span>
                </div>
                <div class="flex justify-between mb-2">
                    <span class="text-coffee-600">Tax (8%)</span>
                    <span class="font-bold" id="cart-tax">$0.00</span>
                </div>
                <div class="flex justify-between text-lg font-bold mt-4">
                    <span>Total</span>
                    <span id="cart-total">$0.00</span>
                </div>
                <button class="w-full bg-coffee-600 text-white py-3 rounded-lg mt-6 hover:bg-coffee-700 transition duration-300" id="checkout-btn">Checkout</button>
            </div>
        </div>
    </div>
    <div class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" id="cart-overlay"></div>

<footer class="bg-coffee-900 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">Brew Haven</h3>
                    <p class="text-coffee-300">Artisan coffee crafted with care since 2010.</p>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="#home" class="text-coffee-300 hover:text-white">Home</a></li>
                        <li><a href="#about" class="text-coffee-300 hover:text-white">About</a></li>
                        <li><a href="#menu" class="text-coffee-300 hover:text-white">Menu</a></li>
                        <li><a href="#contact" class="text-coffee-300 hover:text-white">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Follow Us</h4>
                    <div class="flex space-x-4">
                        <a href="#" class="text-coffee-300 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
                        <a href="#" class="text-coffee-300 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-coffee-300 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-coffee-300 hover:text-white text-xl"><i class="fab fa-tiktok"></i></a>
                    </div>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Newsletter</h4>
                    <p class="text-coffee-300 mb-2">Subscribe for updates and special offers</p>
                    <div class="flex">
                        <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg w-full text-coffee-800">
                        <button class="bg-coffee-600 px-4 py-2 rounded-r-lg hover:bg-coffee-700 transition">Subscribe</button>
                    </div>
                </div>
            </div>
            <div class="border-t border-coffee-700 mt-8 pt-8 text-center text-coffee-300">
                <p>&copy; 2023 Brew Haven. All rights reserved.</p>
            </div>
        </div>
    </footer>

// Cart functionality
        let cart = JSON.parse(localStorage.getItem('cart')) || [];

// DOM elements
        const coffeeMenuContainer = document.getElementById('coffee-menu');
        const foodMenuContainer = document.getElementById('food-menu');
        const cartSidebar = document.getElementById('cart-sidebar');
        const cartOverlay = document.getElementById('cart-overlay');
        const cartBtn = document.getElementById('cart-btn');
        const closeCartBtn = document.getElementById('close-cart');
        const cartItemsContainer = document.getElementById('cart-items');
        const cartCount = document.getElementById('cart-count');
        const cartSubtotal = document.getElementById('cart-subtotal');
        const cartTax = document.getElementById('cart-tax');
        const cartTotal = document.getElementById('cart-total');
        const emptyCartMessage = document.getElementById('empty-cart-message');
        const checkoutBtn = document.getElementById('checkout-btn');
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');

// Display menu items
        function displayMenuItems() {
            // Coffee items
            coffeeMenuContainer.innerHTML = '';
            menuItems.coffee.forEach(item => {
                const itemElement = document.createElement('div');
                itemElement.className = 'bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300';
                itemElement.innerHTML = `
                    <img src="${item.image}" alt="${item.name}" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2 text-coffee-800">${item.name}</h3>
                        <p class="text-coffee-600 text-sm mb-4">${item.description}</p>
                        <div class="flex justify-between items-center">
                            <span class="text-coffee-700 font-bold">$${item.price.toFixed(2)}</span>
                            <button class="bg-coffee-600 text-white px-4 py-2 rounded-lg hover:bg-coffee-700 transition duration-300 add-to-cart" data-id="${item.id}">
                                Add to Cart
                            </button>
                        </div>
                    </div>
                `;
                coffeeMenuContainer.appendChild(itemElement);
            });

// Food items
            foodMenuContainer.innerHTML = '';
            menuItems.food.forEach(item => {
                const itemElement = document.createElement('div');
                itemElement.className = 'bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300';
                itemElement.innerHTML = `
                    <img src="${item.image}" alt="${item.name}" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2 text-coffee-800">${item.name}</h3>
                        <p class="text-coffee-600 text-sm mb-4">${item.description}</p>
                        <div class="flex justify-between items-center">
                            <span class="text-coffee-700 font-bold">$${item.price.toFixed(2)}</span>
                            <button class="bg-coffee-600 text-white px-4 py-2 rounded-lg hover:bg-coffee-700 transition duration-300 add-to-cart" data-id="${item.id}">
                                Add to Cart
                            </button>
                        </div>
                    </div>
                `;
                foodMenuContainer.appendChild(itemElement);
            });

// Add event listeners to "Add to Cart" buttons
            document.querySelectorAll('.add-to-cart').forEach(button => {
                button.addEventListener('click', (e) => {
                    const itemId = parseInt(e.target.getAttribute('data-id'));
                    addToCart(itemId);
                });
            });
        }

// Add item to cart
        function addToCart(itemId) {
            // Find item in coffee or food menu
            let item = menuItems.coffee.find(item => item.id === itemId);
            if (!item) {
                item = menuItems.food.find(item => item.id === itemId);
            }
            
            if (!item) return;

updateCart();
            showCart();
        }

// Remove item from cart
        function removeFromCart(itemId) {
            cart = cart.filter(item => item.id !== itemId);
            updateCart();
        }

// Update quantity
        function updateQuantity(itemId, newQuantity) {
            const item = cart.find(item => item.id === itemId);
            if (item) {
                item.quantity = newQuantity;
                if (item.quantity <= 0) {
                    removeFromCart(itemId);
                } else {
                    updateCart();
                }
            }
        }

// Update cart UI and localStorage
        function updateCart() {
            localStorage.setItem('cart', JSON.stringify(cart));
            
            // Update cart count
            const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
            cartCount.textContent = totalItems;
            
            // Update cart items
            cartItemsContainer.innerHTML = '';
            
            if (cart.length === 0) {
                emptyCartMessage.classList.remove('hidden');
                cartSubtotal.textContent = '$0.00';
                cartTax.textContent = '$0.00';
                cartTotal.textContent = '$0.00';
                return;
            }
            
            emptyCartMessage.classList.add('hidden');
            
            let subtotal = 0;
            
            cart.forEach(item => {
                const itemTotal = item.price * item.quantity;
                subtotal += itemTotal;
                
                const cartItemElement = document.createElement('div');
                cartItemElement.className = 'py-4 flex';
                cartItemElement.innerHTML = `
                    <img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded">
                    <div class="ml-4 flex-1">
                        <h4 class="font-medium text-coffee-800">${item.name}</h4>
                        <div class="flex justify-between mt-1">
                            <span class="text-coffee-600">$${item.price.toFixed(2)}</span>
                            <div class="flex items-center">
                                <button class="text-coffee-500 hover:text-coffee-700 quantity-decrease" data-id="${item.id}">
                                    <i class="fas fa-minus"></i>
                                </button>
                                <span class="mx-2">${item.quantity}</span>
                                <button class="text-coffee-500 hover:text-coffee-700 quantity-increase" data-id="${item.id}">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <button class="text-red-500 hover:text-red-700 ml-4 remove-item" data-id="${item.id}">
                        <i class="fas fa-trash"></i>
                    </button>
                `;
                cartItemsContainer.appendChild(cartItemElement);
            });
            
            // Update totals
            const tax = subtotal * 0.08;
            const total = subtotal + tax;
            
            cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
            cartTax.textContent = `$${tax.toFixed(2)}`;
            cartTotal.textContent = `$${total.toFixed(2)}`;
            
            // Add event listeners to quantity buttons
            document.querySelectorAll('.quantity-decrease').forEach(button => {
                button.addEventListener('click', (e) => {
                    const itemId = parseInt(e.target.closest('button').getAttribute('data-id'));
                    const item = cart.find(item => item.id === itemId);
                    if (item) {
                        updateQuantity(itemId, item.quantity - 1);
                    }
                });
            });
            
            document.querySelectorAll('.quantity-increase').forEach(button => {
                button.addEventListener('click', (e) => {
                    const itemId = parseInt(e.target.closest('button').getAttribute('data-id'));
                    const item = cart.find(item => item.id === itemId);
                    if (item) {
                        updateQuantity(itemId, item.quantity + 1);
                    }
                });
            });
            
            document.querySelectorAll('.remove-item').forEach(button => {
                button.addEventListener('click', (e) => {
                    const itemId = parseInt(e.target.closest('button').getAttribute('data-id'));
                    removeFromCart(itemId);
                });
            });
        }

// Show/hide cart
        function showCart() {
            cartSidebar.classList.remove('translate-x-full');
            cartOverlay.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

function hideCart() {
            cartSidebar.classList.add('translate-x-full');
            cartOverlay.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

// Toggle mobile menu
        function toggleMobileMenu() {
            mobileMenu.classList.toggle('hidden');
        }

// Event listeners
        cartBtn.addEventListener('click', showCart);
        closeCartBtn.addEventListener('click', hideCart);
        cartOverlay.addEventListener('click', hideCart);
        mobileMenuBtn.addEventListener('click', toggleMobileMenu);

// Checkout button
        checkoutBtn.addEventListener('click', () => {
            if (cart.length > 0) {
                alert('Checkout functionality would be implemented here! Redirecting to payment page.');
                // In a real app, you would redirect to a checkout page
            }
        });

// Close mobile menu when clicking a link
        document.querySelectorAll('#mobile-menu a').forEach(link => {
            link.addEventListener('click', toggleMobileMenu);
        });

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

// Initialize the page
        displayMenuItems();
        updateCart();
    </script>

Related Examples

Creative Agency Navbar with Fullscreen Mobile Menu & Animated CTA
A bold, editorial-style navigation bar designed for creative agencies, design studios, architecture firms, and portfolio websites. Built with pure HTML and Tailwind CSS, it features a minimalist branding system, fullscreen mobile navigation, animated call-to-action button, responsive layout, and modern typography inspired by premium digital agencies.

JUGENDRA GANGWAR

4 months ago

381
Promotional sticky top section

Leon Bachmann

3 years ago

13.3k
Active Beauty Main Page

Maxim

1 year ago

1.9k
Hero Section
Hero section design concept

Raul antonio de la cruz hernandez

11 months ago

761
page heaading stacked
yeah booy, oh booy, o buy

Anonymous

2 years ago

10.9k
vanessa
nice

Umutoniwase Yvette

1 year ago

1.1k
Movies are a popular form
Movies are a popular form of entertainment that combine storytelling, visuals, and sound to create immersive experiences. They can be fictional or based on real events, spanning genres like action, comedy, drama, horror, sci-fi, romance, and more. Here’s a quick overview:

nii fanny

1 year ago

1.2k
Hover Button
Hover button then a overlay came from bottom to top

Md. Tofayel islam

2 years ago

2.7k
chating
online chating

Nirere Esther

1 year ago

1.4k
Modern SaaS Agency Landing Page with Dark Mode & Mobile MenuE-Com With nav and filter
A premium SaaS agency landing page built with HTML, Tailwind CSS, and JavaScript. It features a sticky glassmorphism navbar, responsive mobile navigation drawer, light/dark mode toggle, animated hero section, case studies, services, process timeline, testimonial, FAQ accordion, booking CTA, and a clean modern footer. Perfect for startups, AI products, software agencies, creative studios, and digital businesses.

JUGENDRA GANGWAR

3 months ago

513
Hero section
Hero section for your project

Prajwal Hallale

4 years ago

9.2k
Game
prayer candle game light candles with you prayer

Nezerwa Debora

1 year ago

820