Home
Orion.c
Confirmation modal with blurred background

Confirmation modal with blurred background

This tailwind example is contributed by Orion.c, on 27-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are popup,dialog

Modal

Author Orion.c

12.5k

Fork Fullscreen

<div class="relative w-full cursor-pointer pointer-events-none transition my-auto p-4">
        <div
            class="w-full py-2 bg-white cursor-default pointer-events-auto dark:bg-gray-800 relative rounded-xl mx-auto max-w-sm">

<button tabindex="-1" type="button" class="absolute top-2 right-2 rtl:right-auto rtl:left-2">
                <svg title="Close" tabindex="-1" class="h-4 w-4 cursor-pointer text-gray-400"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                        clip-rule="evenodd"></path>
                </svg>
                <span class="sr-only">
                    Close
                </span>
            </button>

<div class="space-y-2 p-2">
                <div class="p-4 space-y-2 text-center dark:text-white">
                    <h2 class="text-xl font-bold tracking-tight" id="page-action.heading">
                        Delete John Doe
                    </h2>

<p class="text-gray-500">
                        Are you sure you would like to do this?
                    </p>
                </div>
            </div>

<div class="px-6 py-2">
                    <div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(0,1fr))]">
                        <button type="button"
                                class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset dark:focus:ring-offset-0 min-h-[2.25rem] px-4 text-sm text-gray-800 bg-white border-gray-300 hover:bg-gray-50 focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-500 dark:text-gray-200 dark:focus:text-primary-400 dark:focus:border-primary-400 dark:focus:bg-gray-800">
                                <span class="flex items-center gap-1">
                                    <span class="">
                                        Cancel
                                    </span>
                                </span>
                            </button>

<span class="flex items-center gap-1">
                                    <span class="">
                                        Confirm
                                    </span>
                                </span>

</button>
                    </div>
                </div>
            </div>

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

Related Examples

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

Author:
Lukas Müller

2 years ago

40.9k
Confirmation Dialog Box

Author:
Anonymous

1 year ago

14.6k
Responsive modal popup

Author:
I.P. Leroy

2 years ago

12.9k
Blurred Background Modal

Author:
Prem..

2 years ago

12.5k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

14.5k
Error popup modal

Author:
Odessa Young

2 years ago

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

Author:
Ti To

1 year ago

7.1k
Social media login modal
Popup model for social media login. i.e. google and GitHub. you can add more buttons according to your need

Author:
Sameer Sultana

1 year ago

14.3k
Tailwind CSS Modal

Author:
Krishna Gudpalle

2 years ago

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

Author:
Abigail

2 years ago

11.2k
Simple Alret Modal
Minimal Modal

Author:
_Amar_

2 years ago

11.3k
Responsive Class List Table using Tailwind CSS
A responsive and customizable class list table built with Tailwind CSS, featuring actions for editing and deleting classes.

Author:
Anum Shahana

6 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components