Confirmation modal/card

This tailwind example is contributed by Sophia Baker, on 04-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog,caution

Card Modal Alert

Author Sophia Baker

Tailwind v3.4 16.5k 11

Fork Fullscreen

<div class="border rounded-lg shadow relative max-w-sm">
    <div class="flex justify-end p-2">
        <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
        </button>
    </div>

<div class="p-6 pt-0 text-center">
        <svg class="w-20 h-20 text-red-600 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <h3 class="text-xl font-normal text-gray-500 mt-5 mb-6">Are you sure you want to delete this user?</h3>
        <a href="#"
            class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-base inline-flex items-center px-3 py-2.5 text-center mr-2">
            Yes, I'm sure
        </a>
        <a href="#"
            class="text-gray-900 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-cyan-200 border border-gray-200 font-medium inline-flex items-center rounded-lg text-base px-3 py-2.5 text-center">
            No, cancel
        </a>
    </div>
</div>

Related Examples

Confirmation Dialog Box

Anonymous

3 years ago

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

Lukas Müller

3 years ago

44k
Error popup modal

Odessa Young

3 years ago

17k
Success alert

Anonymous

3 years ago

16.1k
Responsive modal popup

I.P. Leroy

3 years ago

14.9k
Confirmation modal with blurred background

Orion.c

3 years ago

14.8k
Admin dashboard cards
Card groups for showing stats/info.

Gopi Yadav

3 years ago

22.2k
Tailwind CSS Modal

Krishna Gudpalle

4 years ago

12.8k
Beautiful Info card
Info card with info type section on the corner.

TailwindFlex

4 years ago

10.9k
Confirmation model

Mr Robot

4 years ago

13.6k
Card grid for posts

Mr Robot

3 years ago

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

Abigail

3 years ago

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

Prashant

3 years ago

15.4k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.