modalsIntermediateanimation

Confirmation Modal

A small confirmation dialog with destructive action emphasis.

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 destructive-action confirmation modal with Tailwind <dialog>: warning icon at the top, headline 'Delete this item?', a one-line body, and two buttons — outline Cancel and a solid red Delete. Smaller than a full content modal — max-w-sm. Used for irreversible actions.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/modals/3.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-app-modal-confirm
-->
<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>

        <footer class="mt-6 flex justify-end gap-2">
          <button
            type="button"
            class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200"
          >
            Cancel
          </button>

          <button
            type="button"
            class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
          >
            Done
          </button>
        </footer>
      </div>
    </div>
  </div>
</div>