Home
Abigail
Modal with background overlay

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 CSS v3. It is responsive. similar terms for this example are popup,dialog

Modal

Author Abigail

12.1k

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

Author:
Lukas Müller

2 years ago

43k
Responsive modal popup

Author:
I.P. Leroy

2 years ago

14.3k
Blurred Background Modal

Author:
Prem..

2 years ago

13.6k
Tailwind CSS Modal

Author:
Krishna Gudpalle

3 years ago

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

Author:
Ti To

2 years ago

8k
Confirmation Dialog Box

Author:
Anonymous

2 years ago

16.3k
Confirmation modal with blurred background

Author:
Orion.c

2 years ago

13.9k
Error popup modal

Author:
Odessa Young

2 years ago

16.3k
Confirmation modal/card

Author:
Sophia Baker

3 years ago

15.6k
Login popup
with social media login buttons

Author:
Nikolai

1 year ago

3.6k
User list
User list

Author:
Anonymous

8 months ago

466
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

4 weeks ago

189

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components