Build a responsive Burger Website with Toggle Dark Mode in Tailwind CSS & JavaScript

Last Updated : 06 Aug, 2024

Burger Website is easy to use and designed with Tailwind CSS and JavaScript. It adjusts smoothly to different screens and has a dark mode option. It's perfect for veggie burger lovers, making it easy to browse and order anytime, anywhere. With Tailwind CSS for styling and JavaScript for interactivity, it provides a fun experience.

Prerequisites

Approach

The HTML file sets up the structure of the responsive Burger Website. It includes sections for the header with navigation links, main content with burger items, and other sections like About Us, Contact, and Location.
Tailwind CSS classes are extensively used throughout the HTML to style elements and create a visually appealing layout.
The JavaScript code enhances user interaction by implementing features like toggling dark mode, dropdown menus for burger categories, and smooth scrolling for anchor links. It adds functionality to elements like the dark mode toggle button and burger menu icon for mobile navigation.
Users have the option to switch between light and dark modes, providing flexibility and improving accessibility. This feature is implemented using JavaScript to toggle CSS classes dynamically, changing the color scheme of the website based on user preference.

Example: Illustration of Responsive Burger Website with Toggle dark mode in Tailwind CSS and JavaScript

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Burger Website</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href=
"https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap"
          rel="stylesheet">
    <style>
        @media (max-width: 768px) {
            .nav-links {
                background-color: #34d399;
                position: absolute;
                width: 100%;
                height: 65vh;
                padding: 10px;
            }
        }
    </style>
</head>

<body class="font-[Poppins] h-screen">
    <header class="bg-green-400 shadow-lg h-16">
        <nav class="flex justify-between items-center
                    w-full mx-auto nav_bar">
            <div class="m-4 p-2">
                <img class="w-16 cursor-pointer" alt="Nav Logo" src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg">
            </div>
            <div class="hidden md:block nav-links">
                <ul class="flex md:flex-row flex-col 
                           md:items-center md:gap-[4vw] gap-8">
                    <li>
                        <a class="hover:text-gray-500" 
                           href="#home">
                          Home
                          </a>
                    </li>
                    <li>
                        <div class="dropdown inline-block relative">
                            <button class="hover:text-gray-500
                                           burger_button">
                              Burgers
                              </button>
                            <ul class="dropdown-menu absolute hidden
                                       bg-gray-100 text-gray-700 pt-1
                                       w-40 dropdown_menus_burger">
                                <li>
                                  <a class="rounded-t bg-gray-700 
                                            hover:bg-gray-400
                                            py-2 px-4 block
                                            whitespace-no-wrap 
                                            text-blue-400"
                                      href="#veg-burgers">
                                        Veg Burgers
                                  </a>
                                  </li>
                             <li>
                                  <a class="bg-gray-700 hover:bg-gray-400 
                                            py-2 px-4 block text-blue-400
                                            whitespace-no-wrap"
                                     href="#non-veg-burgers">
                                    Top Selling Burgers
                                  </a>
                              </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a class="hover:text-gray-500" 
                           href="#about">
                              About Us
                          </a>
                    </li>
                    <li>
                        <a class="hover:text-gray-500" href="#contact">
                          Contact Us
                          </a>
                    </li>
                    <li>
                        <a class="hover:text-gray-500" href="#location">
                          Find Store Location
                          </a>
                    </li>
                    <li>
                        <label class="inline-flex items-center 
                                      cursor-pointer">
                            <input type="checkbox" value="" 
                                   class="sr-only peer dark_button" 
                                   id="darkModeToggle">
                            <div class="relative w-11 h-6 bg-gray-200
                                        peer-focus:outline-none 
                                        peer-focus:ring-4 
                                        peer-focus:ring-blue-300 
                                        dark:peer-focus:ring-blue-800
                                        rounded-full peer 
                                        dark:bg-gray-700
                                        peer-checked:after:translate-x-full
                                        rtl:peer-checked:after:-translate-x-full
                                        peer-checked:after:border-white after:content-['']
                                        after:absolute after:top-[2px] after:start-[2px]
                                        after:bg-white after:border-gray-300 after:border
                                        after:rounded-full after:h-5 after:w-5 
                                        after:transition-all dark:border-gray-600 
                                        peer-checked:bg-black">
                            </div>
                        </label>
                    </li>
                </ul>
            </div>
            <div class="flex items-center gap-6">
                <ion-icon onclick="onToggleMenu(this)" 
                          name="menu" id="mobileMenuButton"
                          class="text-3xl cursor-pointer md:hidden">
                  </ion-icon>
            </div>
        </nav>
    </header>


    <main id="mainContent" class="container mx-auto my-8">
        <h1 id="home_h2" class="text-3xl text-center mb-8">
              Enjoy your food and Order here...
          </h1>
        <h3 class="text-3xl mb-8 text-green-400 p-4" 
            id="veg-burgers">
          Latest Veg Burger 
          </h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 
                    md:grid-cols-4 gap-8 p-2">
            <!-- Veg Burger item 1 -->
            <div class="bg-gray-400 p-4 rounded-lg shadow-md 
                        flex flex-col justify-between cursor-pointer
                        w-50 h-50 transition-transform duration-300
                        hover:translate-y-[-5px]">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240307121431/burger1.jpg"
                     alt="Veg Burger 1" class="w-50 rounded-md mb-4">
                <h2 class="text-xl font-semibold mb-5">
                  Classic Veggie Burger
                  </h2>
                <p class="text-white-300">
                      Enjoy a hearty Classic Veggie Burger, 
                    fresh lettuce, tomato, and tangy sauce
                    served on a sesame seed bun.
                  </p>
                <p class="text-white-300 font-semibold">$8.99</p>
                <p class="text-white-600">10 left</p>
                <button class="order-button bg-green-500 
                               hover:bg-green-600 text-white 
                               font-bold py-2 px-4 rounded 
                               self-end">
                      Order Now
                  </button>
            </div>
          
            <!-- Veg Burger item 2 -->
            <div class="bg-gray-400 p-4 rounded-lg 
                        shadow-md flex cursor-pointer 
                        flex-col justify-between w-50
                        h-50 transition-transform 
                        duration-300 
                        hover:translate-y-[-5px]">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240307121505/burger2.jpg"
                     alt="Veg Burger 2" class="w-50 rounded-md mb-4">
                <h2 class="text-xl font-semibold mb-5">
                  Spicy Veggie Burger
                  </h2>
                <p class="text-white-300">
                      A zesty veggie patty infused with spices, 
                    topped with jalapenos, cheese, lettuce, 
                      and mayo served on a whole wheat bun.
                  </p>
                <p class="text-white-300 font-semibold">$9.99</p>
                <p class="text-white-600">8 left</p>
                <button class="order-button bg-green-500 
                               hover:bg-green-600 py-2
                               text-white font-bold px-4
                               rounded mt-4 self-end">
                  Order Now
                  </button>
            </div>

            <!-- Veg Burger item 3 -->
            <div class="bg-gray-400 p-4 rounded-lg 
                        shadow-md flex flex-col
                        justify-between cursor-pointer 
                        w-50 h-50 duration-300
                        transition-transform
                        hover:translate-y-[-5px]">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240307121539/burger3.jpg"
                     alt="Veg Burger 3" class="w-full rounded-md mb-4">
                <h2 class="text-xl font-semibold mb-5">
                      Mushroom Swiss Burger
                  </h2>
                <p class="text-white-300">
                  A gourmet veggie patty topped with sauteed
                  mushrooms, Swiss cheese, lettuce, and special
                  sauce served on a brioche bun.
                  </p>
                <p class="text-white-300 font-semibold">$10.99</p>
                <p class="text-white-600">6 left</p>
                <button class="order-button bg-green-500 
                               hover:bg-green-600 text-white 
                               font-bold py-2 px-4 rounded mt-4 
                               self-end">
                  Order Now
                  </button>
            </div>

            <!-- Veg Burger item 4 -->
            <div class="bg-gray-400 p-4 rounded-lg shadow-md 
                        flex flex-col justify-between 
                        cursor-pointer w-50 h-50 
                        transition-transform duration-300 
                        hover:translate-y-[-5px]">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240307121604/burger4.jpg"
                     alt="Veg Burger 4" class="w-full rounded-md mb-4">
                <h2 class="text-xl font-semibold mb-5">
                  Avocado Veggie Burger
                  </h2>
                <p class="text-white-300">
                  A flavorful veggie patty topped with 
                  avocado slices,lettuce, tomato, and 
                  cilantro-lime mayo served on a multigrain 
                  bun.
                  </p>
                <p class="text-white-300 font-semibold">$11.99</p>
                <p class="text-white-600">3 left</p>
                <button class="order-button bg-green-500 
                               hover:bg-green-600 px-4
                               text-white font-bold py-2  
                               rounded mt-4 self-end">
                  Order Now
                  </button>
            </div>
        </div>
        <h3 class="text-3xl mb-8 text-orange-400 p-4" 
            id="non-veg-burgers">
          Top Selling Burgers
          </h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 
                    md:grid-cols-4 gap-8 p-2">
            
          <!-- Non-veg Burger item 1 -->
            <div class="bg-gray-400 p-4 rounded-lg 
                        shadow-md flex flex-col 
                        justify-between cursor-pointer 
                        w-50 h-50 transition-transform 
                        duration-300 hover:translate-y-[-5px]">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240307121624/burger5.jpg"
                     alt="Non-veg Burger 1" class="w-full rounded-md mb-4">
                <h2 class="text-xl font-semibold mb-5">
                      Spicy Mushroom Burger
                  </h2>
                <p class="text-white-300">
                      Savor the earthy goodness of a grilled 
                      portobello mushroom cap marinated in 
                    balsamic vinegar and olive oil, topped
                      with melted mozzarella cheese, roasted
                      red peppers, caramelized onions, and 
                      basil pesto on a toasted ciabatta bun.
                  </p>
                <p class="text-white-300 font-semibold">$10.99</p>
                <p class="text-white-600">10 left</p>
                <button class="order-button bg-green-500 
                               hover:bg-green-600 text-white
                               font-bold py-2 px-4 rounded mt-4 
                               self-end">
                  Order Now
                  </button>
            </div>

            <div class="bg-gray-400 p-4 rounded-lg shadow-md flex 
                        flex-col justify-between cursor-pointer 
                        w-50 h-50 transition-transform duration-300
                        hover:translate-y-[-5px]">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240307121657/burger6.jpg"
                     alt="Non-veg Burger 2" class="w-full rounded-md mb-4">
                <h2 class="text-xl font-semibold mb-5">
                      Quinoa Veggie Burger
                  </h2>
                <p class="text-white-300">
                  Enjoy a protein-packed quinoa and vegetable 
                  patty seasoned with spices, served with creamy 
                  hummus, sliced cucumber, sun-dried tomatoes,
                  arugula, and a drizzle of tahini sauce on a 
                  multigrain bun.
                  </p>
                <p class="text-white-300 font-semibold">$11.99</p>
                <p class="text-white-600">8 left</p>
                <button class="order-button bg-green-500 
                               hover:bg-green-600 text-white
                               font-bold py-2 px-4 rounded mt-4
                               self-end">
                  Order Now
                </button>
            </div>

            <!-- Non-veg Burger item 3 -->
            <div class="bg-gray-400 p-4 rounded-lg shadow-md 
                        flex flex-col justify-between cursor-pointer
                        w-50 h-50 transition-transform duration-300
                        hover:translate-y-[-5px]">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240307121720/burger8.jpg"
                     alt="Non-veg Burger 3" class="w-full rounded-md mb-4">
                <h2 class="text-xl font-semibold mb-5">
                      Spinach Burger
                  </h2>
                <p class="text-white-300">
                      A flavorful patty made from spinach, feta cheese, 
                      and breadcrumbs, served with roasted red peppers,
                      caramelized onions, and creamy tzatziki sauce on
                      a grilled ciabatta bun.
                  </p>
                <p class="text-white-300 font-semibold">
                  $12.99
                  </p>
                <p class="text-white-600">
                  6 left
                  </p>
                <button class="order-button bg-green-500 
                               hover:bg-green-600 text-white 
                               font-bold py-2 px-4 rounded 
                               mt-4 self-end">
                  Order Now
                  </button>
            </div>

            <div class="bg-gray-400 p-4 rounded-lg shadow-md 
                        flex flex-col justify-between 
                        cursor-pointer w-50 h-50 
                        transition-transform duration-300
                        hover:translate-y-[-5px]">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240307122237/burger7.jpg"
                    alt="Non-veg Burger 4" class="w-full rounded-md mb-4">
                <h2 class="text-xl font-semibold mb-5">
                  Sweet Potato Burger
                  </h2>
                <p class="text-white-300">
                  A satisfying combination of mashed chickpeas,
                  roasted sweet potatoes, and spices, topped 
                  with avocado slices, arugula, pickled red 
                  onions, and sriracha aioli on a whole wheat
                  bun.
                  </p>
                <p class="text-white-300 font-semibold">$13.99</p>
                <p class="text-white-600">3 left</p>
                <button class="order-button bg-green-500 
                               hover:bg-green-600 text-white
                               font-bold py-2 px-4 rounded mt-4
                               self-end">
                  Order Now
                  </button>
            </div>
        </div>

    </main>
    <section id="about" class="mb-8">
        <h3 class="text-3xl mb-8  pt-14 pl-3">About Us</h3>
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
                <div>
                    <h4 class="text-xl font-semibold mb-4">
                      Our Story
                      </h4>
                    <p class="text-white-200 leading-relaxed">
                        At Burger Joint, we believe in serving the
                          best burgers in town with fresh and locally
                          sourced ingredients. Our journey began in 
                          2010 when our founder, John Smith, realized
                          the lack of quality burger joints in the area
                          and decided to fill the gap. Since then, we 
                          have been dedicated to providing our customers
                          with mouthwatering burgers that keep them coming
                          back for more.
                    </p>
                </div>
                <div>
                    <h4 class="text-xl font-semibold mb-4">
                          Our Mission
                      </h4>
                    <p class="text-white-200 leading-relaxed">
                        Our mission at Burger Joint is simple to delight
                          our customers with delicious food, exceptional
                        service, and a welcoming atmosphere. We strive
                          to exceed expectations at every turn and continuously
                          innovate to bring new and exciting flavors to your plate.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section id="contact" class="py-12 bg-gray-100 
                                 flex justify-center">
        <div class="container mx-auto px-4 w-1/2">
            <h3 class="text-3xl mb-8 text-blue-400 p-4">
              Contact Us
              </h3>
            <form action="#" method="POST" 
                  class="grid grid-cols-1 
                         sm:grid-cols-2 gap-6">
                <div>
                    <label for="name" class="block text-gray-700
                                             font-semibold mb-2">
                      Name
                      </label>
                    <input type="text" id="name" name="name" 
                           placeholder="Enter your name"
                           class="w-full border-gray-300 rounded-md
                                  focus:ring-blue-500 focus:border-blue-500
                                  focus:outline-none px-4 py-2">
                </div>
                <div>
                    <label for="email" class="block text-gray-700
                                              font-semibold mb-2">
                      Email
                      </label>
                    <input type="email" id="email" name="email" 
                           placeholder="Enter your email"
                           class="w-full border-gray-300 rounded-md
                                  focus:ring-blue-500 focus:border-blue-500
                                  focus:outline-none px-4 py-2">
                </div>
                <div class="sm:col-span-2">
                    <label for="message" class="block text-gray-700 
                                                font-semibold mb-2">
                      Message
                      </label>
                    <textarea id="message" name="message" 
                              placeholder="Enter your message" 
                              rows="5"
                                 class="w-full border-gray-300 rounded-md
                                     focus:ring-blue-500 focus:border-blue-500
                                     focus:outline-none px-4 py-2">
                      </textarea>
                </div>
                <div class="sm:col-span-2">
                    <button type="submit"
                            class="w-full bg-blue-500 text-white 
                                   font-semibold py-2 px-4 rounded-md
                                   hover:bg-blue-600 transition duration-300">
                          Submit
                      </button>
                </div>
            </form>
        </div>
    </section>
    <section id="location" class="py-12 bg-gray-100">
        <div class="container mx-auto px-4">
            <h3 class="text-3xl mb-8 text-blue-400 p-4">
              Location
              </h3>
            <iframe src=
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d130388.39307946841!2d87.4015748267688!3d22.59538419929326!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a1d55d5bf2822f1%3A0x59e91e62bea899b!2sKeshpur%2C%20West%20Bengal!5e0!3m2!1sen!2sin!4v1680024646627!5m2!1sen!2sin"
                    width=100% height="450" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </section>



    <footer class="bg-gray-800 py-6">
        <div class="container mx-auto flex flex-col 
                    lg:flex-row items-center 
                    justify-between px-4">
            <p class="text-gray-300 mb-4 lg:mb-0">
              &copy; 2024 All rights reserved made by aftaf.
              </p>
            <ul class="flex flex-wrap justify-center 
                       lg:justify-end space-x-4">
                <li>
                  <a href="#about" class="text-gray-300
                                              hover:text-white">
                  About Us
                  </a>
                  </li>
                <li>
                  <a href="#contact" class="text-gray-300 
                                                hover:text-white">
                  Contact
                  </a>
                  </li>
            </ul>
        </div>
    </footer>

    <script src="script.js"></script>

</body>

</html>

JavaScript

const body = document.body;
const home_h2 = document.getElementById('home_h2');
const nav_bar = document.querySelector(".nav_bar");
const darkModeToggle = document.getElementById('darkModeToggle');
const all_a = document.getElementsByTagName('a');
const dropdowns = document.querySelectorAll('.dropdown');
const contactSection = document.getElementById('contact');
const locationSection = document.getElementById('location');
const burger_button = document.querySelector(".burger_button");

const all_h3 = document.getElementsByTagName('h3');
const all_h4 = document.getElementsByTagName('h4');
const all_p = document.getElementsByTagName('p');
const all_label = document.getElementsByTagName('label');


const navLinks = document.querySelector('.nav-links');
const mainContent = document.getElementById("mainContent");

function onToggleMenu(e) {
    e.name = e.name === 'menu' ? 'close' : 'menu';
    navLinks.classList.toggle('top-[10%]');
    navLinks.classList.toggle('hidden'); 
}



darkModeToggle.addEventListener('click', () => {
    const active = darkModeToggle.classList
                                 .contains('active');

    if (!active) {
        body.style.backgroundColor = '#000';
        home_h2.style.color = 'white';
        nav_bar.style.backgroundColor = '#2b2929';
        contactSection.style.backgroundColor = '#2b2929';
        locationSection.style.backgroundColor = '#2b2929';
        burger_button.style.color = '#fff';
        darkModeToggle.classList.add('active');
        for (let i = 0; i < all_a.length; i++) {
            all_a[i].style.color = '#fff';
        }
        for (let i = 0; i < all_h3.length - 2; i++) {
            all_h3[i].style.color = '#fff';
        }
        for (let i = 0; i < all_h4.length; i++) {
            all_h4[i].style.color = '#fff';
        }
        for (let i = 0; i < all_p.length; i++) {
            all_p[i].style.color = '#fff';
        }
        for (let i = 0; i < all_label.length; i++) {
            all_label[i].style.color = '#fff';
        }
        // Fix background and text color of dropdown menu
        document.querySelectorAll('.dropdown-menu a')
                .forEach(item => {
            item.classList
                .remove('text-gray-700', 'bg-gray-100');
            item.classList
                .add('text-blue-400', 'bg-gray-700');
        });

    } else {
        body.style.backgroundColor = '';
        home_h2.style.color = 'black';
        nav_bar.style.backgroundColor = '#68D391';
        contactSection.style.backgroundColor = '';
        locationSection.style.backgroundColor = '';
        burger_button.style.color = 'black';
        darkModeToggle.classList.remove('active');
        for (let i = 0; i < all_a.length; i++) {
            all_a[i].style.color = 'black';
        }
        for (let i = 0; i < all_h3.length - 2; i++) {
            all_h3[i].style.color = 'black';
        }
        for (let i = 0; i < all_h4.length; i++) {
            all_h4[i].style.color = 'black';
        }
        for (let i = 0; i < all_p.length; i++) {
            all_p[i].style.color = 'black';
        }
        for (let i = 0; i < all_label.length; i++) {
            all_label[i].style.color = 'black';
        }

        document.querySelectorAll('.dropdown-menu a')
                .forEach(item => {
            item.classList.remove('text-blue-400', 'bg-gray-700');
            item.classList.add('text-gray-700', 'bg-gray-100');
        });
    }
});

dropdowns.forEach(dropdown => {
    dropdown.addEventListener('mouseover', function () {
        const menu = this.querySelector('.dropdown-menu');
        menu.classList.remove('hidden');
    });

    dropdown.addEventListener('mouseleave', function () {
        const menu = this.querySelector('.dropdown-menu');
        menu.classList.add('hidden');
    });
});

// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        const target = document.querySelector(this.getAttribute('href'));

        window.scrollTo({
            top: target.offsetTop,
            behavior: 'smooth'
        });
    });
});