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

643

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

macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

168
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:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

1.2k
Brand Grid with Hover Effect

Author:
ariaw

7 months ago

1k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Author:
Ele Eriksen

5 months ago

353
Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

756
Hero Section
A 2 column responsive hero section

Author:
Emdadul Islam

1 year ago

2.5k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

4.6k
Card
travel place card hover effect card

Author:
nahid hasan

8 months ago

1.4k
Basic sidebar

Author:
Rajesh Maheshwari

8 months ago

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

Author:
Ragnar lodbrok

11 months ago

1.5k
yvette
vibes kbx

Author:
Umutoniwase Yvette

5 months ago

398
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components