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

1.3k

5

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 popup
Working modal in tailwind CSS Simple snippet for creating models with tailwind and javascript

Author:
Lukas Müller

2 years ago

40.7k
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

1 year ago

7k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

Author:
anandu ap

6 months ago

911
Animated modal with Tailwind Css and alpinejs

Author:
Michael Andreuzza

11 months ago

2.4k
Sign in Modal
Login to continue modal

Author:
Anonymous

9 months ago

1.1k
Minimalistic Modal with Native Functionality
This modal is built using HTML and Tailwind CSS without requiring JavaScript for basic functionality. It leverages the native <dialog> element, allowing users to open the modal by clicking a button and close it by clicking the ❌ button or clicking outside the modal. The design is clean and responsive, ensuring a smooth user experience with minimal code.

Author:
SHARIFUL ISLAM

2 months ago

456
Responsive modal popup

Author:
I.P. Leroy

2 years ago

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

Author:
R Thapa

1 year ago

15.5k
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Author:
Abhiraj

3 months ago

967
LoginModal-1
Popup modal with close

Author:
Rohan Babu

1 year ago

3k
Modal
Responsive model

Author:
inbarajan P

6 months ago

1.9k
Social media login modal
Popup model for social media login. i.e. google and GitHub. you can add more buttons according to your need

Author:
Sameer Sultana

1 year ago

14.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ 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: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1