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>