Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<div x-data="{ open: false }">

<button @click="open = true"
          class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
    Open Modal
  </button>

<div x-show="open"
       x-transition:enter="transition ease-out duration-200"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition ease-in duration-150"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0"
       class="fixed inset-0 z-50 flex items-center justify-center p-4"
       @click.self="open = false">

<div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>

<div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md p-6 z-10"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100">

<h2 class="text-xl font-bold text-gray-900 mb-2">Confirm Action</h2>
      <p class="text-gray-500 mb-6">Are you sure you want to delete this item?</p>

<div class="flex justify-end gap-3">
        <button @click="open = false"
                class="px-4 py-2 text-gray-600 border rounded-lg hover:bg-gray-50">
          Cancel
        </button>
        <button @click="open = false"
                class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
          Delete
        </button>
      </div>
    </div>
  </div>
</div>