- Published on
6 Tips To Make A Simple modal With Tailwind CSS
- What is Tailwind CSS?
- The Description of Simple Modal UI Component
- Why Use Tailwind CSS to Create a Simple Modal UI Component?
- The Preview of Simple Modal UI Component
- The Source Code of Simple Modal UI Component
- How to Create a Simple Modal with Tailwind CSS?
- Step 1: Create the HTML Structure
- Step 2: Style the Modal with Tailwind CSS
- Step 3: Add Animation to the Modal
- Step 4: Add JavaScript to Show and Hide the Modal
- Conclusion
As a FrontEnd technology blogger, I'm always looking for ways to make my designs more efficient and visually appealing. One tool that I've found particularly helpful in achieving this is Tailwind CSS. In this article, I'll be sharing 6 tips to make a simple modal with Tailwind CSS.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that enables developers to create complex designs with minimal effort. It provides a wide range of pre-built classes that can be used to style HTML elements, making it easy to create custom designs without writing any CSS code.
The Description of Simple Modal UI Component
A modal is a UI component that is used to display content on top of an existing page. It is often used to display additional information or to prompt the user for input. A simple modal is a modal that has a basic design and minimal functionality.
Why Use Tailwind CSS to Create a Simple Modal UI Component?
Tailwind CSS provides a wide range of pre-built classes that can be used to create a simple modal with minimal effort. It also allows developers to customize the design of the modal by adding their own classes or modifying existing ones.
The Preview of Simple Modal UI Component
To create a simple modal with Tailwind CSS, we'll be using a combination of HTML and CSS code. The modal will have a basic design with a header, body, and footer section. It will also have a close button that can be used to dismiss the modal.
Free download of the Simple modal's source code
The Source Code of Simple Modal UI Component
To create the simple modal, we'll be using the following HTML and CSS code.
<button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-700 transition" onclick="openModal('modal')">Open modal</button>
<div id="modal" class="fixed hidden z-50 inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-full w-full px-4">
<div class="relative top-40 mx-auto shadow-lg rounded-md bg-white max-w-md">
<!-- Modal header -->
<div class="flex justify-between items-center bg-green-500 text-white text-xl rounded-t-md px-4 py-2">
<h3>Modal header</h3>
<button onclick="closeModal()">x</button>
</div>
<!-- Modal body -->
<div class="max-h-48 overflow-y-scroll p-4">
<p>Scrollable modal body</p>
<p>Scrollable modal body</p>
<p>Scrollable modal body</p>
<p>Scrollable modal body</p>
<p>Scrollable modal body</p>
<p>Scrollable modal body</p>
<p>Scrollable modal body</p>
<p>Scrollable modal body</p>
<p>Scrollable modal body</p>
<p>Scrollable modal body</p>
</div>
<!-- Modal footer -->
<div class="px-4 py-2 border-t border-t-gray-500 flex justify-end items-center space-x-4">
<button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition" onclick="closeModal()">Close</button>
</div>
</div>
</div>
<script type="text/javascript">
function openModal(modalId) {
modal = document.getElementById(modalId)
modal.classList.remove('hidden')
}
function closeModal() {
modal = document.getElementById('modal')
modal.classList.add('hidden')
}
</script>
How to Create a Simple Modal with Tailwind CSS?
Now that we have an understanding of what Tailwind CSS is and why it's useful for creating a simple modal, let's dive into the steps to create one.
Step 1: Create the HTML Structure
The first step is to create the HTML structure for the modal. We'll be using a div element with a class of "modal" to create the modal. Inside the modal div, we'll have three sections: header, body, and footer. We'll also add a close button to the header section.
<div class="modal">
<div class="modal-header">
<h3 class="modal-title">Modal Title</h3>
<button class="modal-close">×</button>
</div>
<div class="modal-body">
<p>Modal Content Goes Here</p>
</div>
<div class="modal-footer">
<button class="modal-btn">Save</button>
<button class="modal-btn">Cancel</button>
</div>
</div>
Step 2: Style the Modal with Tailwind CSS
Now that we have the HTML structure in place, we can start styling the modal using Tailwind CSS classes. We'll start by adding some basic styles to the modal and its sections.
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.modal-title {
margin: 0;
font-size: 1.25rem;
}
.modal-close {
font-size: 1.5rem;
font-weight: bold;
color: #aaa;
border: none;
background-color: transparent;
cursor: pointer;
}
.modal-close:hover,
.modal-close:focus {
color: #000;
text-decoration: none;
outline: none;
}
Step 3: Add Animation to the Modal
To make the modal more visually appealing, we can add some animation to it. We'll use the "transition" property to add a fade-in effect when the modal is displayed.
.modal {
/* previous styles */
transition: all 0.3s ease-in-out;
opacity: 0;
}
.modal.show {
display: block;
opacity: 1;
}
Step 4: Add JavaScript to Show and Hide the Modal
The final step is to add some JavaScript code to show and hide the modal. We'll add an event listener to the close button to hide the modal when it's clicked. We'll also add an event listener to the button that will display the modal when it's clicked.
const modal = document.querySelector('.modal');
const modalBtn = document.querySelector('.modal-btn');
const modalClose = document.querySelector('.modal-close');
modalBtn.addEventListener('click', () => {
modal.classList.add('show');
});
modalClose.addEventListener('click', () => {
modal.classList.remove('show');
});
Conclusion
In this article, we've covered 6 tips to make a simple modal with Tailwind CSS. We've discussed what Tailwind CSS is, why it's useful for creating a simple modal, and how to create a simple modal step-by-step. By following these tips, you can create a simple modal that is both visually appealing and functional.