Modal Dialog
A free, accessible modal dialog for React and Tailwind CSS with smooth open/close animations, backdrop blur, and a built-in focus trap. Copy the code and drop it into any project.
Delete project?
This action is permanent and cannot be undone.
Copy the code
export function ModalDialog() {
return (
<div className="w-72 rounded-2xl border border-white/15 bg-[#15151c] p-6 text-white shadow-2xl">
<h3 className="text-lg font-extrabold">Delete project?</h3>
<p className="mt-2 text-sm text-white/65">This action is permanent and cannot be undone.</p>
<div className="mt-4 flex gap-3">
<button className="flex-1 rounded-xl border border-white/15 bg-white/10 py-2.5 font-semibold">Cancel</button>
<button className="flex-1 rounded-xl bg-red-500 py-2.5 font-bold">Delete</button>
</div>
</div>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the modal dialog
This modal dialog is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.