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

13.2k

6

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

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

Author:
Lukas Müller

1 year ago

37.9k
Error popup modal

Author:
Odessa Young

1 year ago

14k
Success alert

Author:
Anonymous

1 year ago

11.9k
Responsive modal popup

Author:
I.P. Leroy

1 year ago

11.7k
Confirmation modal with blurred background

Author:
Orion.c

1 year ago

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

Author:
Gopi Yadav

1 year ago

16.8k
Tailwind CSS Modal

Author:
Krishna Gudpalle

2 years ago

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

Author:
TailwindFlex

2 years ago

8.7k
Confirmation model

Author:
Mr Robot

2 years ago

12.2k
Card grid for posts

Author:
Mr Robot

1 year ago

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

Author:
Abigail

1 year ago

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

Author:
Prashant

1 year ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ 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

© 2024 TailwindFlex. All Rights Reserved.

v1.9