Components Image Lightbox Image Lightbox Component

Image Lightbox Component

A responsive image lightbox component designed for dashboards, featuring a 3D style and monochromatic color scheme. It includes hover effects and modal functionality using Tailwind CSS for dark mode support.

Preview

HTML Code

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg relative">
    <h2 class="text-white text-2xl font-semibold text-center mb-4">Image Lightbox</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="group relative rounded-lg overflow-hidden">
            <img src="https://picsum.photos/id/1018/400/300" alt="Sample Image" class="w-full h-auto rounded-lg group-hover:scale-105 transition-transform duration-300 ease-in-out" />
            <div class="absolute inset-0 bg-black bg-opacity-30 flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
                <button class="text-white bg-blue-500 hover:bg-blue-600 font-semibold py-2 px-4 rounded">View</button>
            </div>
        </div>
        <div class="group relative rounded-lg overflow-hidden">
            <img src="https://picsum.photos/id/1025/400/300" alt="Sample Image" class="w-full h-auto rounded-lg group-hover:scale-105 transition-transform duration-300 ease-in-out" />
            <div class="absolute inset-0 bg-black bg-opacity-30 flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
                <button class="text-white bg-blue-500 hover:bg-blue-600 font-semibold py-2 px-4 rounded">View</button>
            </div>
        </div>
        <div class="group relative rounded-lg overflow-hidden">
            <img src="https://picsum.photos/id/1032/400/300" alt="Sample Image" class="w-full h-auto rounded-lg group-hover:scale-105 transition-transform duration-300 ease-in-out" />
            <div class="absolute inset-0 bg-black bg-opacity-30 flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
                <button class="text-white bg-blue-500 hover:bg-blue-600 font-semibold py-2 px-4 rounded">View</button>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-white text-xl font-semibold mb-2">User Avatars</h3>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-400" />
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-400" />
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-400" />
        </div>
    </div>
</div>

Related Components

Image Lightbox Component

Minimalist Image Lightbox Component with responsive design and dark theme support for Dashboard purposes. Uses picsum.photos for images.

Open

Glassmorphism Lightbox with Sepia Tones for Real Estate

A responsive image lightbox component with a glassmorphism design, featuring frosted glass-like translucent elements and sepia/brown color tones, suitable for real estate property image galleries. Includes dark mode support.

Open

Image Lightbox Component

A responsive image lightbox component with a retro/vintage theme using Tailwind CSS, supporting dark mode and featuring placeholder images.

Open