Responsive Navigation With Tailwind CSS

Html

    <nav class="navbar md:flex justify-between items-center p-4 shadow">
      <a class="navbar-brand mr-5 bg-black text-white p-1" href="#">LOGO</a>
      <button class="menu_btn inline-block md:hidden"> <i class="fa fa-bars"></i></button>
      <div class="collapse_div md:flex w-full hidden md:block">
        <!-- Links -->
        <ul class="navbar-nav md:flex ml-auto">
          <li class="nav-item">
            <a class="nav-link mr-2" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-2" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-2" href="#">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-2" href="#">Services</a>
          </li>
        </ul>


      </div>
    </nav>

Include Some Js

 <script src="jquery.min.js"></script>
  <script src="popper.min.js"></script>
  <script src="bootstrap.min.js"></script>

Custom Jquery Code

$(document).ready(function () {
  $(".menu_btn").on('click', function (e) {
    $(".collapse_div").slideToggle(400);
  });
});