Tailwind css Responsive Navbar

<!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>
© 2016 - 2022, All Rights are Reserved.