How to create Delete Modal Card using JavaScript and Tailwind ?

Last Updated : 04 Mar, 2024

Create a delete confirmation modal with Tailwind CSS, a utility-first framework for building modern user interfaces. This modal features customizable button styling, modal content layout, and success message display, providing a seamless user experience. Utilize Tailwind's classes to effortlessly design and enhance UI components.

Output Preview: Let us have a look at how the final output will look like.

Approach

First, create the basic structure of the webpage using Tailwind CSS by integrating via CDN Links.
Style the modal using TailwindCSS utilities including bg-white ssets the background color of the modal content to white. the shadow-lg adds a shadow effect on the modal content to make it appear elevated.
The class rounded-lg rounds the corners of the modal content.
The function showModal() removes the hidden class from the modal, making it visible, the function hideModal() adds the hidden class to the modal, hiding it from view, and the function showMessage() removes the hidden class from the success message displays it for 3 seconds, then hides it again.

Example: Implementation of Delete Modal in Tailwind CSS

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Delete Confirmation Modal</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
          rel="stylesheet">
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" 
          rel="stylesheet">
    <style>
        .modal-content {
            border: 4px solid #10B981;
        }
    </style>
</head>

<body class="bg-gray-100 flex items-center 
             justify-center h-screen">
    <button id="showModalBtn"
            class="bg-red-500 text-white px-4 py-2 
                   rounded-full transition 
                   duration-300 hover:bg-red-600">
        Show Delete Confirmation
    </button>
    <div id="modal" class="modal-container hidden">
        <div class="modal-content bg-white 
                    shadow-lg rounded-lg p-8">
            <h2 class="text-lg font-semibold
                       text-gray-800 mb-4">
                Delete Confirmation
            </h2>
            <p class="confirmation-message 
                      text-gray-600 mb-6">
                Are you sure you want to delete this item?
            </p>
            <div class="button-container flex justify-center">
                <button id="cancelBtn"
                        class="bg-gray-300 text-gray-700 px-4 
                               py-2 rounded-full mr-4 
                               hover:bg-gray-400 transition
                               duration-300">
                    Cancel
                </button>
                <button id="deleteBtn"
                        class="bg-red-500 text-white px-4 
                               py-2 rounded-full hover:bg-red-600
                               transition duration-300">
                    Delete
                </button>
            </div>
        </div>
    </div>
    <div id="message" class="hidden bg-green-500 text-white
                             px-4 py-2 rounded-full mt-4">
        Item deleted successfully!
    </div>
    <script>
        const modal = document.getElementById('modal');
        const message = document.getElementById('message');
        const showModalBtn = document.getElementById('showModalBtn');
        const cancelBtn = document.getElementById('cancelBtn');
        const deleteBtn = document.getElementById('deleteBtn');
        function showModal() {
            modal.classList.remove('hidden');
        }
        function hideModal() {
            modal.classList.add('hidden');
        }
        function showMessage() {
            message.classList.remove('hidden');
            setTimeout(() => {
                message.classList.add('hidden');
            }, 3000);
        }
        showModalBtn.addEventListener('click', () => {
            showModalBtn.classList.add('hidden');
            modal.classList.remove('hidden');
        });
        cancelBtn.addEventListener('click', hideModal);
        deleteBtn.addEventListener('click', () => {
            hideModal();
            showMessage();
        });
    </script>
</body>

</html>