Bootstrap Dropdown With Tailwindcss

Bootstrap Dropdown With Tailwindcss

Bootstrap Dropdown With Tailwindcss

HTML

  <div class="dropdown relative">
    <button type="button" class=" rounded shadow p-2 dropdown-toggle" data-toggle="dropdown">
      Dropdown button
      <svg class=" w-4 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd"
          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
          clip-rule="evenodd" />
      </svg>
    </button>
    <div class="w-56 bg-white hidden dropdown-menu  shadow-lg p-2 absolute top-5 ">
      <a class="block block p-1 border-b border-gray-200 mb-2" href="#">Link 1</a>
      <a class="block block p-1 border-b border-gray-200 mb-2" href="#">Link 2</a>
      <a class="block block p-1 " href="#">Link 3</a>
    </div>
  </div>

CSS

.dropdown-menu.show {
    @apply block;
}

Include Some Js

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