dailoge box

This tailwind example is contributed by Sathishkumar Nallusamy, on 02-Jul-2026. Component is made with Tailwind v3.4. similar terms for this example is caution

Alert

Author Sathishkumar Nallusamy

Tailwind v3.4 219 2

Fork Fullscreen

@if (isDialogOpen) {
  <div class="fixed inset-0 z-50 flex items-center justify-center p-4 overflow-x-hidden overflow-y-auto">
    
    <div class="fixed inset-0 bg-gray-500/75 backdrop-blur-sm transition-opacity" (click)="closeDialog()"></div>

<div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
      <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
        <div class="sm:flex sm:items-start">
          <div class="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
            <svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
            </svg>
          </div>
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-base font-semibold text-gray-900" id="modal-title">Delete Record</h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500">Are you sure you want to delete this record? This action cannot be undone.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 gap-2">
        <button 
          type="button" 
          (click)="confirmDelete()"
          class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 sm:w-auto cursor-pointer"
        >
          Delete
        </button>
        <button 
          type="button" 
          (click)="closeDialog()"
          class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto cursor-pointer"
        >
          Cancel
        </button>
      </div>
    </div>
  </div>
}

Related Examples

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.7k
alert
dehgan creator

Anonymous

1 year ago

1.1k
Toast Notifications
Visually appealing toast notification component designed with Tailwind CSS

Rajesh Maheshwari

1 year ago

2k
Subcribe Card - Alert - Notification

ABDO-SY

1 year ago

1.2k
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

2k
Alert Component

Prem..

4 years ago

12.2k
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
Basic alert (Success, Info, Warning, Error)

John Hutton

1 year ago

766
card Alert - icons - glass

ABDO-SY

1 year ago

1.5k
machine
tell you how your MAC pc work

gidy

10 months ago

748
Confirmation model

Mr Robot

4 years ago

13.6k