<div
    x-data="{ open: false }"
    class="w-full flex flex-col items-start"
>
    <div>
        <button @click="open = !open" class="bg-white rounded px-8 py-2">Open</button>
    </div>
    <div
        x-cloak
        x-show="open"
    >
    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-40 bg-black opacity-50"></div>

        <div
            x-show="open"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform scale-90"
            x-transition:enter-end="opacity-100 transform scale-100"
            x-transition:leave="transition ease-in duration-300"
            x-transition:leave-start="opacity-100 transform scale-100"
            x-transition:leave-end="opacity-0 transform scale-90"
            class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto">
            <div
                @click.away="open = false"
                @keydown.escape.window="open = false"
                class="relative bg-white rounded-lg p-16 shadow-lg">
                <div class="absolute top-0 right-0 p-2">
                    <button
                        @click="open = false"
                        class="hover:text-gray-500 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <div>
                    <p>Modal Content</p>
                </div>
            </div>
        </div>
    </div>
</div>