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
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-lgrounds the corners of the modal content. -
The function showModal() removes thehiddenclass from the modal, making it visible, the functionhideModal() adds thehiddenclass to the modal, hiding it from view,and the function showMessage() removes thehiddenclass 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=
rel="stylesheet">
<link href=
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
Recommended Articles