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 301 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

Notification
Pop up card when form submitted is successful

Olajide Olamide (Laemmy)

6 months ago

780
Alert Component

Prem..

4 years ago

12.2k
alert
dehgan creator

Anonymous

1 year ago

1.2k
Confirmation model

Mr Robot

4 years ago

13.6k
Confirmation modal/card

Sophia Baker

3 years ago

16.6k
404 Page
The 404 Page is a responsive and customizable error page designed to inform users when they’ve reached a nonexistent or broken link. This component not only improves user experience but also provides a chance to showcase creativity and guide users back to the right path. Key Features: Fully responsive design that works on all devices. Engaging visuals (customizable images, icons, or animations). Includes a message like "Page Not Found" or "Oops! Something went wrong." Provides helpful navigation options such as a "Go Home" button or links to other pages. Easily customizable for themes, styles, and content.

Abhiraj

1 year ago

3.5k
card Alert - icons - glass

ABDO-SY

1 year ago

1.6k
Basic alert (Success, Info, Warning, Error)

John Hutton

1 year ago

766
Alerts - Htmlwind
Simple alerts

Htmlwind

1 year ago

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

Prajwal Hallale

3 years ago

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

Rajesh Maheshwari

1 year ago

2.1k
cards
html , css ,

Hacker Development

1 year ago

1.2k