<style>
    .bg-gray-800.bg-opacity-20 {
        background-color: rgba(31, 41, 55, 0.20);
    }
</style>
<div x-show="showAlert" @click="showAlert = false"
    class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-20">
    
    <div class="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-semibold text-gray-800">Alert</h2>
            <button @click="showAlert = false" class="text-gray-400 hover:text-gray-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        <p class="text-gray-700">Please select at least one.</p>
        <div class="mt-4 text-right">
            <button @click="showAlert = false"
                class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus">OK</button>
        </div>
    </div>
</div>
