Tailwind CSS Modal style example

tailwind

Here is an example of how you might create a modal using Tailwind CSS:


<div class="fixed top-0 left-0 w-full h-full flex items-center justify-center">
    <div class="absolute w-full h-full bg-gray-500 opacity-75"></div>

    <div class="relative max-w-xl w-full bg-white rounded-md shadow-xl py-4 px-6">
        <div class="flex justify-between items-center pb-3">
            <h3 class="text-2xl font-medium text-gray-900">Modal Title</h3>
            <button class="text-3xl font-medium text-gray-500 focus:outline-none focus:text-gray-700"
                    aria-label="Close modal">
                <span aria-hidden>&times;</span>
            </button>
        </div>
        <div class="prose max-w-none text-gray-700 mb-6">
            <p>Modal content goes here</p>
        </div>
        <div class="flex justify-end">
            <button
                class="px-4 py-2 font-medium text-white bg-indigo-600 rounded-full hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500 active:bg-indigo-800">
                Save Changes
            </button>
            <button
                class="ml-3 px-4 py-2 font-medium text-gray-700 rounded-full hover:text-gray-500 focus:outline-none focus:text-gray-500 active:text-gray-800">
                Cancel
            </button>
        </div>
    </div>
</div>

This will create a modal with a title, content, and two buttons (one for “Save Changes” and one for “Cancel”). The fixed and absolute elements are used to create a full-screen overlay, and the relative element is used to position the modal itself.

The max-w-xl class sets the maximum width of the modal to xl, and the rounded-md shadow-xl class adds rounded corners and a drop shadow to the modal. The prose class is used to apply styles to the content of the modal, such as setting the font size and line height.

To handle the toggling behavior of the modal, you will need to use JavaScript. You can use event listeners to show and hide the modal when a button or other element is clicked. You may also want to add additional styles and functionality, such as a way to close the modal by clicking on the overlay or pressing the Esc key.