<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Tailwind Navigation variant</title>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bg-white border-b">
<div class="container mx-auto">
<nav class="flex items-center justify-between">
<div class="text-grey py-3">
Brand
</div>
<ul class="list-reset flex text-sm nav-menu">
<li class="mr-6 py-4 px-2 border-b-2 border-transparent hover:border-blue">
<a class="text-blue hover:text-blue-darker py-2" href="#">Link</a>
</li>
<li class="mr-6 py-4 px-2 border-b-2 border-blue">
<a class="text-blue hover:text-blue-darker py-2" href="#">Active</a>
</li>
<li class="mr-6 py-4 px-2 border-b-2 border-transparent hover:border-blue">
<a class="text-blue hover:text-blue-darker py-2" href="#">Link</a>
</li>
<li class="mr-6 py-4 px-2 border-b-2 border-transparent hover:border-blue">
<a class="text-grey-light cursor-not-allowed py-2" href="#">Disabled</a>
</li>
</ul>
<div class="py-4">
<a class="text-sm px-4 py-2 border rounded text-white bg-blue" href="#">Download</a>
</div>
</nav>
</div>
</div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/simondepelchin/tailwind-navigation-variant-OOvxww */
a {
text-decoration: none;
}
.nav-menu > li {
margin-bottom: -2px;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
