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

13.7k

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

42.7k
Confirmation Dialog Box

Author:
Anonymous

2 years ago

16.1k
Responsive modal popup

Author:
I.P. Leroy

2 years ago

14.2k
Blurred Background Modal

Author:
Prem..

2 years ago

13.5k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

15.5k
Error popup modal

Author:
Odessa Young

2 years ago

16.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.9k
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

2 years ago

15k
Tailwind CSS Modal

Author:
Krishna Gudpalle

3 years ago

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

Author:
Abigail

2 years ago

11.9k
Simple Alret Modal
Minimal Modal

Author:
_Amar_

3 years ago

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

10 months ago

897

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components