Dropdown Default

            
<div class="flex h-60 justify-center">
  <div
    x-data="{
                open: true,
                toggle() {
                    if (this.open) {
                        return this.close()
                    }
  
                    this.$refs.button.focus()
  
                    this.open = true
                },
                close(focusAfter) {
                    if (! this.open) return
  
                    this.open = false
  
                    focusAfter && focusAfter.focus()
                }
            }"
    x-on:keydown.escape.prevent.stop="close($refs.button)"
    x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
    x-id="['dropdown-button']"
    class="relative inline-block">
    <!-- Button -->

    <button x-ref="button" x-on:click="toggle()" :aria-expanded="open" :aria-controls="$id('dropdown-button')" type="button" class="inline-flex gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100 disabled:cursor-not-allowed disabled:border-gray-100 disabled:bg-gray-50 disabled:text-gray-400">
      Options

      <!-- Heroicon: chevron-down -->
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" 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>

    <!-- Panel -->
    <div x-ref="panel" x-show="open" x-transition.origin.top.left x-on:click.outside="close($refs.button)" :id="$id('dropdown-button')" class="absolute left-0 z-10 mt-2 w-48 rounded-lg border border-gray-100 bg-white text-left text-sm shadow-lg">
      <div class="p-1">
        <a href="#" class="flex w-full items-center rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100"> Dashboard </a>
        <a href="#" class="flex w-full items-center rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"> Settings </a>
        <a href="#" class="flex w-full items-center rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"> Help </a>
        <a href="#" class="flex w-full items-center rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100"> Log out </a>
      </div>
    </div>
  </div>
</div>