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

Tags: Card Modal Alert

Author Sophia Baker

6.2k

3

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>

Be the first one

Error popup modal

Author:
Odessa Young

8 months ago

5.7k
Tailwind CSS Modal

Author:
Krishna Gudpalle

1 year ago

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

Author:
Lukas Müller

9 months ago

7.6k
Responsive modal popup

Author:
I.P. Leroy

9 months ago

3.8k
Confirmation Dialog Box

Author:
Anonymous

3 months ago

3.5k
Confirmation modal with blurred background

Author:
Orion.c

9 months ago

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

Author:
Gopi Yadav

10 months ago

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

Author:
TailwindFlex

1 year ago

4.3k
Card grid for posts

Author:
Mr Robot

11 months ago

5.4k
Confirmation model

Author:
Mr Robot

1 year ago

5.9k
Image card

Author:
Laurits

11 months ago

7.8k
Dismissible alert

Author:
Gopi Yadav

1 year ago

5.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1100+ componenent

TailwindFlex.com

Tailwindflex.com is a free tailwind examples library. It's a one-stop destination for ready-made tailwind examples.

Contact

Email:

admin@tailwindflex.com

Links

FAQs Tailwind Playground Contribution Guidelines

© 2023 TailwindFlex. All Rights Reserved.