Instantly share code, notes, and snippets.
w3collective/tailwind-responsive-navbar.html
Last active Feb 3, 2021
Responsive navbar component with Tailwind CSS
<!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
This comment has been minimized.
Source => https://w3collective.com/responsive-navbar-tailwind-css/