Home
Indra
Confirmation Modal for Critical Actions

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are popup,dialog,caution,Toast, Snackbar

Modal Alert Notification

Author Indra

118

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

Author:
Prashant

2 years ago

12.7k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

3 years ago

13.3k
Tailwind CSS Alert

Author:
Krishna Gudpalle

2 years ago

10.9k
Confirmation model

Author:
Mr Robot

3 years ago

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

Author:
Arya

3 years ago

10.5k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

15.1k
Dismissible alert bar

Author:
Simon Scheffer

2 years ago

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

Author:
Prajwal Hallale

2 years ago

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

Author:
Code huit

2 years ago

15.2k
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.

Author:
anandu ap

11 months ago

1.7k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Author:
Sedat Kumcu

10 months ago

1.7k
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.

Author:
Abhiraj

8 months ago

719

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components