Build a responsive Burger Website with Toggle Dark Mode in Tailwind CSS & JavaScript
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
<!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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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">
© 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>
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'
});
});
});
Output: