Dropdown Direction

            
<div class="flex h-60 justify-center">
  <div class="inline-flex gap-60">
    <div
      x-data="{
              open: false,
              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">
        Left
        <!-- 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
      x-data="{
              open: false,
              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">
        Right
        <!-- 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.right x-on:click.outside="close($refs.button)" :id="$id('dropdown-button')" class="absolute right-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>
</div>