How to create Delete Modal Card using JavaScript and Tailwind ? Last Updated : 04 Mar, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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.Output ApproachFirst, 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> Output : Output Comment More infoAdvertise with us Next Article How to create Budget Management Tool using JavaScript and Tailwind CSS ? M maha123 Follow Improve Article Tags : JavaScript Similar Reads How to Create Event Management Card using JavaScript and Tailwind CSS ? An event management website is a platform designed to help users plan, organize, and promote events. It typically includes features such as event scheduling, ticket sales, attendee registration, and venue management. Building such a website with the Tailwind CSS can result in a sleek and modern user 4 min read How to create NPV Calculator Card using JavaScript & Tailwind CSS ? A Net Present Value (NPV) Calculator is a web-based tool that helps users calculate the net present value of an investment. It typically includes input fields for the initial investment amount, the discount rate, and the expected cash flows. The calculator then calculates the NPV based on these inpu 3 min read How to create Budget Management Tool using JavaScript and Tailwind CSS ? A budget management tool is a web application designed to help individuals or businesses track their income, expenses, and savings to maintain financial stability and achieve their goals. In this project, we will develop a budget management tool using the TailwindCSS a utility-first CSS framework th 3 min read How to Create a PortScanner Card in JavaScript and Tailwind CSS ? The Port Scanner is a web application that allows users to scan ports on a specified host or IP address. Users can enter the host or IP address along with the list of ports (comma-separated) they want to scan. The application then checks the status of each port (open or closed) and displays the resu 2 min read How to create Alarm Setter Card in Tailwind CSS and JavaScript ? The Alarm Setter app is a web application built with HTML, Tailwind CSS, and JavaScript. It allows users to input and set an alarm time, receiving timely notifications upon match. Through its design and functionality, users enjoy a seamless experience managing alarms. The application also includes a 3 min read How to Create a Modal Box using HTML CSS and JavaScript? We will learn how to create a modal dialog box using HTML, CSS, and JavaScript. A modal is a pop-up dialog that appears on top of the main content and requires the user to interact with it before returning to the main screen.Approach to Create Modal BoxHTML Structure:Create a button that opens the m 2 min read Like