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

779

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

Sharp corner button design
button with hover effect

Author:
Amit Pachange

2 years ago

12.5k
producer
to working songs and films

Author:
Nishimwe Jeanine

6 months ago

632
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:

Author:
nii fanny

6 months ago

642
yvette
vibes kbx

Author:
Umutoniwase Yvette

7 months ago

573
Pixel Blast
Pixel Blast

Author:
Raul antonio de la cruz hernandez

2 months ago

485
New Nav Component
A new navigation component

Author:
Amit PR

1 year ago

3.5k
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

1 year ago

3.5k
Linkedin
chatting

Author:
Rebecca IRANKUNDA

7 months ago

963
No one
nice

Author:
Umutoniwase Yvette

7 months ago

390
Section Heading
A gorgeous section heading with a smooth blur element.

Author:
Coastal UI

1 year ago

1.7k
Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Author:
Rathanak Phan

6 months ago

676
Book
nice kbx

Author:
Umutoniwase Yvette

7 months ago

551

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components