Image Lightbox Component
A responsive image lightbox component with a minimalist flat design, monochromatic color scheme, and moderate complexity, suitable for social media interfaces. It supports a dark theme using Tailwind CSS's dark: prefix and does not require JavaScript. Images are sourced from picsum.photos.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Image 1 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image1/600/400" alt="Image 1" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 2 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image2/600/400" alt="Image 2" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 3 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image3/600/400" alt="Image 3" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 4 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image4/600/400" alt="Image 4" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 5 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image5/600/400" alt="Image 5" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 6 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image6/600/400" alt="Image 6" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
</div>
<!-- Lightbox Overlay (Hidden by default, would be shown with JS) -->
<div id="lightbox" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
<div class="relative">
<img src="" alt="Lightbox Image" id="lightbox-image" class="max-w-3xl max-h-3xl rounded-lg shadow-lg">
<button class="absolute top-4 right-4 text-white text-3xl">×</button>
</div>
</div>
</div>Related Components
Image Lightbox Component
A responsive image lightbox component designed in dark mode using Tailwind CSS. It features a dark background, opacity effects, and responsive designs to accommodate various screen sizes.
Image Lightbox Component
A responsive Image Lightbox component designed in Material Design style, featuring a triadic color scheme and support for dark mode. It's suitable for portfolio showcasing work or products.
Image Lightbox Component
A complex, responsive image lightbox component with a 'paper/print-inspired' design, jewel-tone color scheme, and dark mode support, suitable for music/audio platforms. It features rich interactive elements.