modalsIntermediateanimation

Centered Modal

A centered modal dialog with backdrop, title, body, and footer actions.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a modal dialog with Tailwind: a fixed full-screen backdrop with bg-black/50 and a centered card with rounded corners, padding, a title, a body paragraph, and a footer row with Cancel + Confirm buttons. Use the native <dialog> element for backdrop click, escape key, and focus trap. Open animation: opacity + scale transition.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/modals/1.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-modal
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class=" w-full">
<div
      class="fixed inset-0 z-50 grid place-content-center bg-black/50 p-4"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modalTitle"
    >
      <div class="w-full max-w-md rounded-lg bg-white p-6 shadow-lg">
        <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Title</h2>

        <div class="mt-4">
          <p class="text-pretty text-gray-700">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>