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>
