Confirmation Modal for Critical Actions

A clean and responsive warning dialog component built with Tailwind CSS. Includes a title, descriptive text, and action buttons for confirmation or cancellation of critical actions.

This tailwind example is contributed by Indra, on 01-Sep-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are popup,dialog,caution,Toast, Snackbar

Modal Alert Notification

Author Indra

Tailwind v3.4 1.1k 4

Fork Fullscreen

<span> Warning </span></a>
          <div
            role="button"
            aria-label="close dialog "
            class="rounded cursor-pointer transition-colors ease-in-out duration-150 opacity-70 hover:opacity-90"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M6 18 18 6M6 6l12 12"
              />
            </svg>
          </div>
        </div>
        <div class="flex-1 px-4">
          <p class="text-sm text-gray-700  dark:text-gray-400 my-4">
          Deleting this item is permanent and cannot be undone. Please confirm before 
  proceeding.
          </p>
        </div>
        <div class="flex justify-end px-4 pt-2 pb-4 *:border *:border-transparent">
        
          <div
            role="button"
            aria-label="send"
            class="py-1.5 px-2 bg-yellow-600/10  dark:hover:border-yellow-500 dark:active:bg-yellow-600/10  active:bg-yellow-600/10  transition-colors ease-in-out duration-150 max-w-max rounded font-medium text-sm text-yellow-600 dark:text-yellow-500 cursor-pointer flex items-center gap-1"
          >
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
  <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>

Confirm
          </div>
        </div>
      </div>
    </div>
</div>

Related Examples

Notification Alert Section
Notification card with close button

Prashant

3 years ago

13.8k
Floating dismissible notification
bottom right floating alert

Prashant

4 years ago

14.4k
Tailwind CSS Alert

Krishna Gudpalle

3 years ago

11.8k
Confirmation model

Mr Robot

4 years ago

13.6k
Notification alert section
Show info, success, or error messages

Arya

4 years ago

11.5k
Confirmation modal/card

Sophia Baker

3 years ago

16.5k
Dismissible alert bar

Simon Scheffer

3 years ago

10.5k
Closable toast message
show notification toast message at the bottom right corner

Prajwal Hallale

3 years ago

8.1k
Toast
mensajes de alerta a los visitantes de su sitio web.

Code huit

3 years ago

16.6k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

anandu ap

1 year ago

3.8k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Sedat Kumcu

1 year ago

2.6k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Abhiraj

1 year ago

2.1k