Create a Bootstrap navbar with Tailwind CSS

bootstrap_navbar_in_tailwind.html

<nav class="fixed top-0 right-0 left-0 z-40 flex flex-wrap sm:flex-row items-center justify-between sm:justify-start py-1 px-4 bg-gray-900">
  <a class="inline-block py-1 mr-4 text-xl text-gray-100 hover:text-gray-100" href="#">Fixed navbar</a>
  <button class="inline-block py-1 px-3 leading-none bg-transparent border border-transparent rounded text-gray-500 border-gray-700 sm:hidden" type="button" data-toggle="collapse" data-target="#navbarCollapse">
    <span class="navbar-toggler-icon inline-block w-6 h-6 align-middle bg-center bg-no-repeat"></span>
  </button>
  <div class="collapse navbar-collapse hidden w-full flex-grow items-center sm:flex sm:w-auto" id="navbarCollapse">
    <ul class="flex flex-col pl-0 mb-0 list-none mr-auto sm:flex-row">
      <li>
        <a class="text-gray-200 hover:text-gray-500 sm:px-2" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li>
        <a class="text-gray-600 hover:text-gray-500 sm:px-2" href="#">Link</a>
      </li>
      <li>
        <a class="text-gray-500 pointer-events-none sm:px-2" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

styles.css

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

.navbar-toggler-icon {
  content: "";
}

.navbar-collapse.show {
  @apply block
}

.navbar-collapse.show .nav-link {
  @apply px-0
}

Example is made by using regular Bootstrap JS