Home
matoleo chance
Artisan Coffee Crafted with Care

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 CSS v3. It is responsive.

Header Hover

Author matoleo chance

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

Glowing gradient border
on hover glow border

Author:
Prashant

2 years ago

22.2k
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

Author:
Mike Varen

1 year ago

3.5k
school secondary
school

Author:
Nirere Esther

5 days ago

25
Hover Button
Hover button then a overlay came from bottom to top

Author:
Md. Tofayel islam

8 months ago

1.7k
Basic sidebar

Author:
Rajesh Maheshwari

3 months ago

607
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

9 months ago

2.8k
Uses emoji for attention, mentions key features (modern, responsive, accessible)
Drop-in Tailwind CSS profile card component with responsive layout, gradient header, and hover effects - zero custom CSS needed. Features skill tags, social icons, and clean stats display. Just copy-paste the HTML, swap in your details, and you're live. Perfect for portfolios, developer profiles, or link-in-bio pages.

Author:
Muhammad Umair Arshad

1 month ago

325
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

6 months ago

892
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."

Author:
Acode Master(Mfuranziza Dusabe Hamza)

6 days ago

59
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

7 months ago

2.8k
news coffee &tea
According to large population studies, coffee and tea both appear to be good for your heart, lowering risk for heart disease and stroke.

Author:
Augustin

1 week ago

14
MyWebsite
Create a professional website for free with the Website.com website builder. Domain names, web hosting, website templates, and ecommerce solutions included.

Author:
Augustin

1 week ago

29

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components