Skip to content

Instantly share code, notes, and snippets.

@chan18

chan18/html

Created January 9, 2022 18:34
Show Gist options
  • Save chan18/7c4888b5745e798b12c1f517f0570c3c to your computer and use it in GitHub Desktop.
Save chan18/7c4888b5745e798b12c1f517f0570c3c to your computer and use it in GitHub Desktop.
Download ZIP
nav bar with tailwind css
Raw
html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#menu-toggle:checked + #menu {
display: block;
}
</style>
</head>
<body class="antialiased bg-gray-200">
<header class="lg:px-16 px-6 bg-white flex flex-wrap items-center lg:py-0 py-2">
<!-- dropdown -->
<label for="menu-toggle" class="lg:hidden block">
<svg class="fill-current text-gray-900" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<title>menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
</svg>
</label>
<!-- click and add toggle the menu -->
<input class="hidden" type="checkbox" id="menu-toggle" />
<!-- navigation list -->
<div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
<nav>
<ul class="lg:flex items-center justify-between text-base text-gray-700 pt-4 lg:pt-0">
<li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-indigo-400" href="#">1</a></li>
<li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-indigo-400" href="#">2</a></li>
<li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-indigo-400" href="#">3</a></li>
<li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-indigo-400 lg:mb-0 mb-2" href="#">4</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment