Create a Bootstrap drop down with Tailwind CSS

bootstrap_drop_down_in_tailwind.html

<div class="relative">
  <button class="inline-block font-normal text-center px-3 py-2 leading-normal text-base rounded cursor-pointer text-white bg-gray-600 hover:bg-gray-700 dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu hidden z-20 float-left py-2 mt-1 text-base text-gray-900 list-none text-left border border-gray-300 bg-white rounded shadow">
    <a class="block w-full py-1 px-6 font-normal text-gray-900 bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100" href="#">Action</a>
    <a class="block w-full py-1 px-6 font-normal text-gray-900 bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100" href="#">Another action</a>
    <a class="block w-full py-1 px-6 font-normal text-gray-900 bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100" href="#">Something else here</a>
  </div>
</div>

styles.css

.dropdown-menu {
  min-width: 10rem;
}

.dropdown-menu.show, .dropdown.open .dropdown-menu {
  @apply block absolute top-0 left-0;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}

Example is made by using regular Bootstrap JS

What version of Bootstrap are you using here? I can't seem to achieve the same results.

It's ok, wasn't using bundle js. Have you managed to produce a submenu too?

It's ok, wasn't using bundle js. Have you managed to produce a submenu too?

Sorry, was on vacation. No, never tried to.