Skip to content

Instantly share code, notes, and snippets.

@shriharip

shriharip/index.html

Created April 24, 2024 15:27
Show Gist options
  • Save shriharip/287d30022d941d78b72677bb870fdf1c to your computer and use it in GitHub Desktop.
Save shriharip/287d30022d941d78b72677bb870fdf1c to your computer and use it in GitHub Desktop.
Download ZIP
tailwind responsive nav (https://langcss.com/demo)
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Nav</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
function toggleNavbar(collapseID) {
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("block");
}
</script>
</head>
<body>
<nav class="bg-gray-800 p-4">
<div class="container mx-auto flex items-center justify-between flex-wrap">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<span class="font-semibold text-xl tracking-tight">Brand</span>
</div>
<div class="block lg:hidden">
<button onclick="toggleNavbar('navbar-default')" class="text-white focus:outline-none">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div id="navbar-default" class="hidden w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-gray-300 mr-4">
Home
</a>
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-gray-300 mr-4">
About
</a>
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-gray-300">
Contact
</a>
</div>
</div>
</div>
</nav>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment