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>