Search Components

Image Lightbox

Enlarged view of images with overlay effect

Image Lightbox Component

A responsive image lightbox component with a retro/vintage design and earth tone color scheme, suitable for dashboards.

                <div class="relative w-full p-4 max-w-4xl mx-auto">
    <!-- Thumbnail images -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Image 1" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=1')" />
        <img src="https://picsum.photos/300/200?random=2" alt="Image 2" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=2')" />
        <img src="https://picsum.photos/300/200?random=3" alt="Image 3" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=3')" />
        <img src="https://picsum.photos/300/200?random=4" alt="Image 4" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=4')" />
    </div>

    <!-- Modal overlay -->
    <div id="imageModal" class="fixed inset-0 z-50 hidden bg-black bg-opacity-75 justify-center items-center dark:bg-opacity-90" onclick="closeModal()">
        <div class="relative w-11/12 md:w-3/4 lg:w-2/3">
            <span class="absolute top-2 right-2 text-white cursor-pointer" onclick="closeModal()">&times;</span>
            <img id="modalImage" class="rounded-lg shadow-lg" src="" alt="Modal Image" />
        </div>
    </div>
</div>

<!-- Tailwind CSS styles for dark mode and retro theme -->
<style>
    body {
        background-color: #f4f4e6;
        color: #333;
    }
    .dark body {
        background-color: #1a202c;
        color: #e2e8f0;
    }
</style>

Image Lightbox

Responsive Image Lightbox Component with Dark Theme

Open Preview

                <div id="imageModal" class="fixed inset-0 z-50 hidden overflow-y-auto lg:flex lg:items-center lg:justify-center bg-black bg-opacity-90">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-3xl mx-auto">
    <div class="flex justify-between items-center border-b border-gray-200 dark:border-gray-700 px-4 py-3">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Image Title</h3>
      <button onclick="closeModal()" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
        <svg class="h-6 w-6" 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>
    </div>
    <div class="p-4">
      <img src="https://picsum.photos/800/600" alt="Image" class="w-full h-auto rounded-lg">
    </div>
  </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
  <!-- Image cards to trigger the lightbox -->
  <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/300" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
    <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/301" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
      <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/302" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
      <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/303" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
  
</div>

<script>
function openModal() {
  document.getElementById('imageModal').classList.remove('hidden');
}

function closeModal() {
  document.getElementById('imageModal').classList.add('hidden');
}
</script>

Image Lightbox Component

Image Lightbox Component with Retro/Vintage design, Analogous color scheme, Simple complexity, for Business/Corporate purpose. Responsive with dark theme support. HTML only with Tailwind CSS.

Open Preview

                <div class="container mx-auto px-4 py-8 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <!-- Image 1 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover 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">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover 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">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover 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">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>
    
    <!-- Add more images as needed -->

  </div>
</div>

Image Lightbox Component

A responsive Image Lightbox Component designed for e-commerce with a minimalist flat design style, supporting light and dark themes using Tailwind CSS.

Open Preview

                <div class="relative inline-block cursor-pointer group">
    <img src="https://picsum.photos/600/400" alt="Lightbox" class="w-full h-auto rounded-lg shadow-sm transition duration-300 ease-in-out transform group-hover:scale-105">
    <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100 rounded-lg"></div>
    <div class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
        <span class="text-white text-2xl font-semibold">View Image</span>
    </div>
</div>

<!-- Lightbox Modal -->
<div id="lightbox-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-80 hidden">
    <div class="relative w-full max-w-3xl">
        <img src="https://picsum.photos/1200/800" alt="Lightbox Image" class="w-full h-auto rounded-lg shadow-lg">
        <button class="absolute top-4 right-4 text-white bg-red-500 hover:bg-red-600 rounded-full p-2 transition duration-300 ease-in-out">✖</button>
    </div>
</div>

<style>
    /* Dark Mode Support */
    .dark .bg-gray-900 { background-color: #1b1b1b; }
    .dark .bg-black { background-color: #000; }
</style>

Image Lightbox Component

A Brutalist style Image Lightbox component suitable for a blog or content platform, designed with earth tones and complex interactive elements.

Open Preview

                <div class="relative flex flex-col items-center justify-center p-4 w-full max-w-screen-lg mx-auto bg-white dark:bg-gray-800 border-2 border-gray-700 dark:border-gray-300 rounded-lg overflow-hidden shadow-lg">
    <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-gray-200">Image Lightbox</h2>
    <div class="flex flex-wrap justify-center gap-4">
        <!-- Image Thumbnails -->
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=1" alt="Example Image 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=1')">
        </div>
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=2" alt="Example Image 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=2')">
        </div>
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=3" alt="Example Image 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=3')">
        </div>
    </div>
    <!-- Lightbox Overlay -->
    <div id="lightbox" class="hidden fixed inset-0 z-50 bg-black bg-opacity-75 flex items-center justify-center transition-opacity duration-300">
        <span class="absolute top-4 right-4 text-white cursor-pointer" onclick="closeLightbox()">&times;</span>
        <img id="lightbox-img" class="max-w-full max-h-full object-contain" src="" alt="Lightbox Image">
    </div>
</div>

<script>
function openLightbox(imageUrl) {
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    lightboxImg.src = imageUrl;
    lightbox.classList.remove('hidden');
}

function closeLightbox() {
    const lightbox = document.getElementById('lightbox');
    lightbox.classList.add('hidden');
}
</script>

Image Lightbox Component

A simple responsive image lightbox component designed for e-commerce websites, featuring a dark mode style and analogous color scheme.

Open Preview

                <div class="fixed inset-0 flex items-center justify-center bg-gray-900 dark:bg-gray-800 z-50">
    <div class="relative w-full max-w-2xl">
        <button class="absolute top-0 right-0 p-2 text-white hover:bg-gray-700 dark:hover:bg-gray-600 rounded-full focus:outline-none" aria-label="Close">
            &times;
        </button>
        <img src="https://picsum.photos/800/600" alt="Product Image" class="w-full h-auto rounded-lg shadow-lg">
        <div class="flex justify-between mt-4">
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
        </div>
    </div>
</div>

Image Lightbox Component

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

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    <!-- Image 1 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/1/300/200" alt="Image 1" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/2/300/200" alt="Image 2" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/3/300/200" alt="Image 3" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/4/300/200" alt="Image 4" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>
  </div>

  <!-- Lightbox Overlay (hidden by default) -->
  <div id="lightbox-overlay" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 hidden">
    <div class="relative">
      <img id="lightbox-image" src="" alt="Lightbox Image" class="max-w-3xl max-h-screen">
      <button id="close-lightbox" class="absolute top-4 right-4 text-white text-2xl font-bold">&times;</button>
    </div>
  </div>
</div>

Image Lightbox Component

A responsive image lightbox component designed in a Brutalist style with Earth tones. It features a dark mode support for dashboard visualization.

Open Preview

                <div class="relative"> 
    <!-- Lightbox trigger --> 
    <div class="group cursor-pointer"> 
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-full h-auto rounded-lg border-2 border-gray-700 dark:border-gray-300 transition-all duration-300 ease-in-out hover:scale-105"> 
    </div> 
    
    <!-- Lightbox overlay --> 
    <div class="hidden group-hover:block fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center transition-opacity duration-300"> 
        <div class="relative p-4"> 
            <img src="https://picsum.photos/800/600" alt="Lightbox Image" class="max-w-full max-h-[90vh] rounded-lg border-4 border-yellow-500 dark:border-cyan-400 shadow-2xl"> 
            <button class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full hover:bg-red-700 transition-colors duration-300">Close</button> 
        </div> 
    </div> 
</div> 

<!-- Avatar Section --> 
<div class="mt-4 flex items-center space-x-3"> 
    <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-700 dark:border-gray-300"> 
    <div class="text-lg text-gray-800 dark:text-gray-200"> 
        <h3 class="font-bold">User Name</h3> 
        <p class="text-sm text-gray-600 dark:text-gray-400">User Role</p> 
    </div> 
</div>

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.

Open Preview

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

Image Lightbox Component

A complex Image Lightbox Component designed in a Brutalist style, suitable for social media interfaces, featuring a grayscale color scheme and high contrast for dark mode support.

Open Preview

                <div class="relative z-10">
    <!-- Thumbnail Trigger -->
    <div class="mb-4">
        <img src="https://picsum.photos/200/300" alt="Thumbnail" class="cursor-pointer h-auto w-full border border-gray-700 hover:border-gray-500 dark:border-gray-300 dark:hover:border-gray-100">
    </div>

    <!-- Modal for Lightbox -->
    <div class="fixed inset-0 bg-gray-900 bg-opacity-75 dark:bg-opacity-95 flex items-center justify-center hidden group-hover:block">
        <div class="bg-gray-800 w-full max-w-3xl p-6 rounded-lg shadow-lg border border-gray-700">
            <!-- Image Display -->
            <img src="https://picsum.photos/800/600" alt="Large Image" class="w-full h-auto mb-4 rounded-lg border border-gray-600 dark:border-gray-400">
            <!-- Close Button -->
            <button class="absolute top-4 right-4 text-white hover:text-gray-400">
                &times;
            </button>
            <div class="flex justify-end mt-4">
                <a href="#" class="text-gray-300 hover:text-gray-100 transition-colors duration-200">Next</a>
                <a href="#" class="ml-4 text-gray-300 hover:text-gray-100 transition-colors duration-200">Previous</a>
            </div>
        </div>
    </div>
</div>

<style>
    /* Brutalist Styles */
    img {
        user-select: none;
    }
    button {
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
    }
    button:hover {
        color: #ddd;
    }
    .hidden {
        display: none;
    }
</style>

Search Components

Categories

Image Lightbox