Modal with background overlay

Reduce the opacity of the page content to bring the focus to the modal.

This tailwind example is contributed by Abigail, on 24-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog

Modal

Author Abigail

Tailwind v3.4 12.6k 7

Fork Fullscreen

<div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>

<div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
        
        <div class="modal-content py-4 text-left px-6">
            <div class="flex justify-between items-center pb-3">
                <p class="text-2xl font-bold">Modal Title</p>
                <div class="modal-close cursor-pointer z-50">
                    <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                        viewBox="0 0 18 18">
                        <path d="M1.39 1.393l15.318 15.314m-15.318 0L16.706 1.393" />
                    </svg>
                </div>
            </div>
            <p>Modal content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at purus urna.
                Vestibulum nec erat in diam rutrum posuere. Fusce gravida orci nec mi volutpat euismod. Proin aliquet,
                lacus sit amet egestas rhoncus, turpis nulla laoreet urna, nec ultricies nibh urna eu sapien. </p>

<div class="mt-4 flex justify-end">
                <button class="modal-close px-4 bg-gray-100 p-3 rounded-lg text-black hover:bg-gray-200">Cancel</button>
                <button class="px-4 bg-purple-500 p-3 ml-3 rounded-lg text-white hover:bg-purple-400">Save</button>
            </div>
        </div>
    </div>

</div>

Related Examples

Modal popup
Working modal in tailwind CSS Simple snippet for creating models with tailwind and javascript

Lukas Müller

3 years ago

44.1k
Responsive modal popup

I.P. Leroy

3 years ago

15k
Blurred Background Modal

Prem..

3 years ago

14.5k
Tailwind CSS Modal

Krishna Gudpalle

4 years ago

12.8k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Ti To

2 years ago

8.9k
Confirmation Dialog Box

Anonymous

3 years ago

17.4k
Confirmation modal with blurred background

Orion.c

3 years ago

14.9k
Error popup modal

Odessa Young

3 years ago

17k
Confirmation modal/card

Sophia Baker

3 years ago

16.6k
modal
modal

aditya_sharma

1 month ago

181
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

478
Simple Alret Modal
Minimal Modal

_Amar_

4 years ago

12.7k