Bootstrap like Dropdown using tailwind css and alpine js

Basic Dropdowns

Here is an example of basic bootstrap dropdown using tailwind css and alpine js.

<div x-data="{show: false}" @click.away="show = false">
    <button @click="show = ! show" class="block bg-blue-600 bg-blue-600 text-gray-200 rounded-lg px-6 text-sm py-3 overflow-hidden border-2 border-gray-600 focus:outline-none focus:border-white">
        <div class="flex">
            <span>Dropdown Buttons</span> 
            <svg class="fill-current text-gray-200" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
        </div>
    </button>
    <div x-show="show" class="mt-2 py-2 w-48 bg-white rounded-lg shadow-xl">
        <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Account settings</a>
        <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Support</a>
        <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Sign out</a>
    </div>
</div>

Bootstrap style Dropdowns

Example of Dropdown divider using tailwind css and alpine js.

<div x-data="{ show: false }"  @click.away="show = false" class="mb-2">
    <button @click="show = ! show" type="button" class="flex bg-blue-600 text-gray-200 rounded-lg px-6 py-3 focus:outline-none focus:border-white text-sm">
    <span class="pr-2">Dropdown Buttons</span> 
        <svg class="fill-current text-gray-200" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
    </button>
    <div x-show="show" class="absolute bg-gray-100 z-10 shadow-md" style="min-width:10rem">
        <a class="block px-3 py-2" href="#">Link 1</a>
        <a class="block px-3 py-2" href="#">Link 2</a>
        <a class="block px-3 py-2" href="#">Link 3</a>
        <hr class="border-t border-gray-200 my-0">
        <a class="block px-3 py-2" href="#">Another Link</a>
    </div>
</div>