<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#BD1E51',
secondary: '#490B3D',
tertiary: '#F1B814'
}
}
}
}
</script>
</head>
<body>
<nav class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 flex justify-between">
<div class="p-5 text-white">
Brand Name
</div>
<div
id="navTarget"
class="
md:border-0
transition-all ease-in-out
grow flex flex-col md:flex-row md:justify-between absolute md:static top-16 md:top-0 bg-primary md:bg-transparent w-full md:w-0 opacity-0 md:opacity-100">
<ul class="flex flex-col md:flex-row">
<li class="p-2 md:p-5 text-white">About us</li>
<li class="p-2 md:p-5 text-white">Gallery</li>
</ul>
<div class="p-2 md:p-5 text-white">
Action
</div>
</div>
<div class="block md:hidden p-2" name="menu" onclick="openMenu();">
<i class="bi bi-justify" style="font-size:2rem;color:white;"></i>
</div>
</nav>
</body>
</html>
<script>
function openMenu(){
let navTarget=document.querySelector("#navTarget");
navTarget.classList.toggle("opacity-100");
}
</script>
डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग
Full Stack Web Development with Laravel
Affiliate Program
Tailwind css Responsive Navbar
Contact us
GSTIN: 05AAGCC7402F1Z2