Tailwind Navigation variant

In this example below you will see how to do a Tailwind Navigation variant with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by simondepelchin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright simondepelchin ©
  • HTML
  • CSS
<!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;
}

Comments