Answers for "Fixing stuff in alpine"

Fixing stuff in alpine

<div x-data="{ flyoutMenuOpen: false }" class="relative">
  <button type="button" 
@click="flyoutMenuOpen = !flyoutMenuOpen" 
x-state:on="Item active" 
x-state:off="Item inactive" 
:class="{ 'text-skin-blue2': flyoutMenuOpen, 'text-skin-white': !flyoutMenuOpen }" 
class="group inline-flex items-center text-base leading-6 hover:text-skin-blue2 transition ease-in-out duration-150">
    Menu item
  </button>
  <div @click.away="flyoutMenuOpen = false" 
x-description="Flyout menu, show/hide based on flyout menu state." 
x-show="flyoutMenuOpen" 
x-transition:enter="transition ease-out duration-200" 
x-transition:enter-start="opacity-0 translate-y-1" 
x-transition:enter-end="opacity-100 translate-y-0" 
x-transition:leave="transition ease-in duration-150" 
x-transition:leave-start="opacity-100 translate-y-0" 
x-transition:leave-end="opacity-0 translate-y-1" 
class="absolute z-10 left-1/2 transform -translate-x-1/4">
    <div class="overflow-hidden">
      <div class="relative">
        <ul>
          <li><a href="">Link sub menu</a></li>
          <li><a href="">Link sub menu</a></li>
          <li><a href="">Link sub menu</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>