Home
Maxim
Modal multiple window

Modal multiple window

This tailwind example is contributed by Maxim, on 28-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are popup,dialog

Modal

Author Maxim

3.1k

10

Fork Fullscreen

<script src="//unpkg.com/alpinejs" defer></script>
 <div class="py-16">
	<div class="flex justify-center flex-wrap flex-row" x-data="{ openImage: null }">
		<template x-for="(image, index) in images" :key="index">
			<span class="p-4">
				<button type="button" class="w-full" x-on:click="openImage = index">
					<img class="max-w-full max-h-full w-24 h-24" :src="image.src" :alt="image.alt">
					<figcaption class="mt-2 text-sm text-center text-blue-500" x-text="image.caption"></figcaption>
				</button>
			</span>
		</template>
		<div x-show="openImage !== null" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="transform opacity-0 translate-y-full" x-transition:enter-end="transform opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="transform opacity-100 translate-y-0" x-transition:leave-end="transform opacity-0 translate-y-full" class="fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-50">
			<div class="flex items-center justify-center min-h-screen">
				<div class="relative w-full max-w-3xl">
					<button type="button" class="absolute top-0 right-0 m-4 text-white" x-on:click="openImage = null">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
						</svg>
					</button>
					<img class="max-w-full" :src="images[openImage].src" :alt="images[openImage].alt">
					
				</div>
			</div>
		</div>
	</div>
	<script>
		let images = [
			{ src: "https://immaxim.com/site/assets/files/1125/vcard.png", alt: "Vcard", caption: "Vcard" },
			{ src: "https://immaxim.com/site/assets/files/1125/immaxim_com.png", alt: "immaxim.com website", caption: "Website" },
			{ src: "https://immaxim.com/site/assets/files/1125/vcard.png", alt: "Vcard", caption: "Vcard" },
			{ src: "https://immaxim.com/site/assets/files/1125/immaxim_com.png", alt: "immaxim.com website", caption: "Website" },
			{ src: "https://immaxim.com/site/assets/files/1125/vcard.png", alt: "Vcard", caption: "Vcard" },
			{ src: "https://immaxim.com/site/assets/files/1125/immaxim_com.png", alt: "immaxim.com website", caption: "Website" },
			{ src: "https://immaxim.com/site/assets/files/1125/vcard.png", alt: "Vcard", caption: "Vcard" },
			{ src: "https://immaxim.com/site/assets/files/1125/immaxim_com.png", alt: "immaxim.com website", caption: "Website" },
			{ src: "https://immaxim.com/site/assets/files/1125/vcard.png", alt: "Vcard", caption: "Vcard" },
		];
		
		document.addEventListener('click', function(event) {
		const modal = document.querySelector('.modal');
		if (modal && !modal.contains(event.target)) {
		 openImage = null;
		}
		});
	</script>
</div>

Related Examples

Modal with Tailwind CSS

Author:
EliteAI Tools

1 year ago

2.3k
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/

Author:
Achraf Testq

5 months ago

601
Confirmation modal/card

Author:
Sophia Baker

3 years ago

16.5k
Confirmation model

Author:
Mr Robot

4 years ago

13.6k
Confirmation Dialog Box

Author:
Anonymous

3 years ago

17.2k
Incentives
tailwind css Incentives

Author:
Anonymous

2 years ago

5.9k
Blurred Background Modal

Author:
Prem..

3 years ago

14.4k
Confirmation Modal for Critical Actions
A clean and responsive warning dialog component built with Tailwind CSS. Includes a title, descriptive text, and action buttons for confirmation or cancellation of critical actions.

Author:
Indra

1 year ago

1.1k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Author:
Ti To

2 years ago

7.8k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

1 year ago

1.6k
Error popup modal

Author:
Odessa Young

3 years ago

17k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
Anonymous

1 year ago

864

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: [email protected]

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12