Home
Sophia Baker
Confirmation modal/card

Confirmation modal/card

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

Card Modal Alert

Author Sophia Baker

14.2k

8

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

Author:
Anonymous

1 year ago

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

Author:
Lukas Müller

2 years ago

40.5k
Error popup modal

Author:
Odessa Young

2 years ago

14.7k
Success alert

Author:
Anonymous

1 year ago

12.9k
Responsive modal popup

Author:
I.P. Leroy

2 years ago

12.5k
Confirmation modal with blurred background

Author:
Orion.c

2 years ago

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

Author:
Gopi Yadav

2 years ago

18.4k
Tailwind CSS Modal

Author:
Krishna Gudpalle

2 years ago

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

Author:
TailwindFlex

2 years ago

9.4k
Confirmation model

Author:
Mr Robot

2 years ago

12.5k
Card grid for posts

Author:
Mr Robot

2 years ago

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

Author:
Abigail

2 years ago

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

Author:
Prashant

1 year ago

12k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1