Confirmation Dialog Box

This tailwind example is contributed by Anonymous, on 06-Sep-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog

Modal

Author Anonymous

Tailwind v3.4 17.2k 11

Fork Fullscreen

<div class="fixed inset-0 flex items-center justify-center z-50 backdrop-blur confirm-dialog ">
    <div class="relative px-4 min-h-screen md:flex md:items-center md:justify-center">
        <div class=" opacity-25 w-full h-full absolute z-10 inset-0"></div>
        <div class="bg-white rounded-lg md:max-w-md md:mx-auto p-4 fixed inset-x-0 bottom-0 z-50 mb-4 mx-4 md:relative shadow-lg">
            <div class="md:flex items-center">
                <div class="rounded-full border border-gray-300 flex items-center justify-center w-16 h-16 flex-shrink-0 mx-auto">
                <i class="bx bx-error text-3xl">
                &#9888;
                </i>
                </div>
                <div class="mt-4 md:mt-0 md:ml-6 text-center md:text-left">
                <p class="font-bold">Warning!</p>
                <p class="text-sm text-gray-700 mt-1">You will lose all of your data by deleting this. This action cannot be undone.
                </p>
                </div>
            </div>
            <div class="text-center md:text-right mt-4 md:flex md:justify-end">
                <button id="confirm-delete-btn" class="block w-full md:inline-block md:w-auto px-4 py-3 md:py-2 bg-red-200 text-red-700 rounded-lg font-semibold text-sm md:ml-2 md:order-2">
                    Delete
                </button>
                <button id="confirm-cancel-btn" class="block w-full md:inline-block md:w-auto px-4 py-3 md:py-2 bg-gray-200 rounded-lg font-semibold text-sm mt-4 md:mt-0 md:order-1">
                Cancel
                </button>
            </div>
        </div>
    </div>
</div>

Related Examples

Modal popup
Working modal in tailwind CSS Simple snippet for creating models with tailwind and javascript

Lukas Müller

3 years ago

44k
Blurred Background Modal

Prem..

3 years ago

14.5k
Responsive modal popup

I.P. Leroy

3 years ago

14.9k
Confirmation modal/card

Sophia Baker

3 years ago

16.5k
Confirmation modal with blurred background

Orion.c

3 years ago

14.8k
Error popup modal

Odessa Young

3 years ago

17k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Ti To

2 years ago

8.9k
Tailwind CSS Modal

Krishna Gudpalle

4 years ago

12.8k
Modal with background overlay
Reduce the opacity of the page content to bring the focus to the modal.

Abigail

3 years ago

12.6k
Confirmation model

Mr Robot

4 years ago

13.6k
Simple Alret Modal
Minimal Modal

_Amar_

4 years ago

12.7k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

R Thapa

2 years ago

18.3k