Modal Overlay with Tailwind

A modal has two layers: a fixed full-screen backdrop that blocks interaction, and a centered dialog box on top. Everything is positioned using fixed and centering utilities.

Modal structure

<div class="fixed inset-0 z-40 bg-black/50 flex items-center justify-center p-4">
  <div class="relative w-full max-w-md bg-white rounded-2xl shadow-xl z-50">

    <div class="flex items-center justify-between px-6 py-4 border-b">
      <h2 class="text-lg font-semibold text-gray-900">Confirm Delete</h2>
      <button class="text-gray-400 hover:text-gray-600">x</button>
    </div>

    <div class="px-6 py-4">
      <p class="text-sm text-gray-600">This action cannot be undone.</p>
    </div>

    <div class="flex justify-end gap-3 px-6 py-4 border-t">
      <button class="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md">Cancel</button>
      <button class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md">Delete</button>
    </div>
  </div>
</div>

The backdrop and dialog share a flex container to center the dialog. Using p-4 on the backdrop ensures breathing room on mobile. max-w-md prevents the dialog from stretching too wide on large screens.