<div>
    <div class="w-full flex justify-end gap-1">
        <div class="aspect-square w-8 bg-white">
            <div class="w-full h-full flex justify-center items-center p-2 border-2 rounded text-gray-600">
            ⌘
            </div>
        </div>
        <div class="aspect-square w-8 bg-white">
            <div class="w-full h-full flex justify-center items-center p-2 border-2 rounded text-gray-600">
            K
            </div>
        </div>
    </div>
    <div
        x-data="{ open: false }"
        x-cloak
        x-show="open"
        @keydown.window.prevent.meta.k="open = !open"
        @keydown.escape.window="open = false"
        x-transition:enter="transition ease-out duration-100"
        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-100"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="w-full flex justify-center items-center">
        <div
            @click.away="open = false"
            class="flex-1 flex flex-col gap-4 justify-center bg-white max-w-2xl p-4 shadow border-gray-400 border-4 rounded-lg">
            <input type="text" placeholder="Search..." class="w-full p-2 focus:outline-none border-2 border-gray-100 rounded">
            <ul>
                <li class="w-full">
                    <a href="#" class="p-4 rounded w-full block hover:bg-gray-100">Docs</a>
                </li>
                <li class="w-full">
                    <a href="#" class="p-4 rounded w-full block hover:bg-gray-100">Blog</a>
                </li>
                <li class="w-full">
                    <a href="#" class="p-4 rounded w-full block hover:bg-gray-100">Support</a>
                </li>
            </ul>
        </div>
    </div>
</div>