Skip to content

Instantly share code, notes, and snippets.

@andrewriveradev

andrewriveradev/tailwind-responsive-navbar.html

Forked from w3collective/tailwind-responsive-navbar.html
Created April 11, 2021 22:09
Show Gist options
  • Save andrewriveradev/11596fc29ee6c5e6694d0155c4fb7bdc to your computer and use it in GitHub Desktop.
Save andrewriveradev/11596fc29ee6c5e6694d0155c4fb7bdc to your computer and use it in GitHub Desktop.
Download ZIP
Responsive navbar component with Tailwind CSS
Raw
tailwind-responsive-navbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Style a responsive navbar component with Tailwind CSS</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<script>
document.getElementById("hamburger").onclick = function toggleMenu() {
const navToggle = document.getElementsByClassName("toggle");
for (let i = 0; i < navToggle.length; i++) {
navToggle.item(i).classList.toggle("hidden");
}
};
</script>
</head>
<body>
<nav class="flex flex-wrap items-center justify-between p-5 bg-blue-200">
<img src="http://acmelogos.com/images/logo-1.svg" alt="ACME" width="120" />
<div class="flex md:hidden">
<button id="hamburger">
<img class="toggle block" src="https://img.icons8.com/fluent-systems-regular/2x/menu-squared-2.png" width="40" height="40" />
<img class="toggle hidden" src="https://img.icons8.com/fluent-systems-regular/2x/close-window.png" width="40" height="40" />
</button>
</div>
<div class="toggle hidden w-full md:w-auto md:flex text-right text-bold mt-5 md:mt-0 border-t-2 border-blue-900 md:border-none">
<a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Home</a>
<a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Products</a>
<a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Pricing</a>
<a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Contact</a>
</div>
<a href="#" class="toggle hidden md:flex w-full md:w-auto px-4 py-2 text-right bg-blue-900 hover:bg-blue-500 text-white md:rounded">Create Account</a>
</nav>
<script src="script.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment