Search Components

Image Lightbox

Enlarged view of images with overlay effect

Memphis_Monochrome_Image_Lightbox

A simple, responsive image lightbox component with a Memphis Design influence, featuring a monochrome palette with a single bright accent color. Designed for job/career platforms.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden group border-4 border-black dark:border-white animate-fade-in">
    
    <!-- Memphis Design Top Accent -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-yellow-400 dark:bg-yellow-500 rounded-br-full z-10 opacity-75 sm:opacity-100"></div>
    <div class="absolute top-0 right-0 w-16 h-16 bg-blue-400 dark:bg-blue-500 rounded-bl-full z-10 opacity-50"></div>

    <!-- Image Container (Simulated Lightbox Opener) -->
    <div class="relative h-64 sm:h-72 md:h-80 lg:h-96 w-full overflow-hidden">
      <img src="https://picsum.photos/1200/800?random=1" alt="Career Development Image" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
      
      <!-- Overlay for 'View Details' -->
      <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <button class="px-6 py-3 bg-yellow-400 dark:bg-yellow-500 text-black text-lg font-bold uppercase rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out">
          View Details
        </button>
      </div>
    </div>
    
    <!-- Content Area -->
    <div class="p-6 sm:p-8 relative z-20">
      <h3 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight">
        Elevate Your Career Path
      </h3>
      <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 mb-4">
        Explore new opportunities and connect with industry leaders. Click the image to see more about our exclusive career resources.
      </p>
      
      <!-- Call to Action / Info Grid -->
      <div class="grid grid-cols-2 gap-4 text-center mb-6">
        <div class="p-3 bg-gray-200 dark:bg-gray-700 rounded-md border-2 border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block text-lg font-bold text-gray-900 dark:text-white">500+</span>
          <span class="block text-xs text-gray-600 dark:text-gray-400">Courses</span>
          <div class="absolute top-0 left-0 w-6 h-6 bg-yellow-400 dark:bg-yellow-500 rounded-br-md opacity-20"></div>
        </div>
        <div class="p-3 bg-gray-200 dark:bg-gray-700 rounded-md border-2 border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block text-lg font-bold text-gray-900 dark:text-white">10K+</span>
          <span class="block text-xs text-gray-600 dark:text-gray-400">Members</span>
          <div class="absolute top-0 right-0 w-6 h-6 bg-blue-400 dark:bg-blue-500 rounded-bl-md opacity-20"></div>
        </div>
      </div>

      <!-- Simulated Profile / Mentor -->
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-yellow-400 dark:border-yellow-500" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Mentor Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">Sarah Johnson</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">Career Coach, HR Dept.</p>
        </div>
      </div>
    </div>

    <!-- Memphis Design Bottom Accent -->
    <div class="absolute bottom-0 right-0 w-20 h-20 bg-yellow-400 dark:bg-yellow-500 rounded-tl-full z-10 opacity-75 sm:opacity-100"></div>
    <div class="absolute bottom-0 left-0 w-12 h-12 bg-blue-400 dark:bg-blue-500 rounded-tr-full z-10 opacity-50"></div>

  </div>
</div>

Cyberpunk_Real_Estate_Lightbox

A simple, responsive image lightbox component with cyberpunk-inspired muted color scheme, suitable for real estate property listings. Features dark mode support and uses semantic HTML.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-950 dark:bg-zinc-950 p-4 font-mono antialiased">
  <!-- Image Lightbox Component -->
  <div class="relative w-full max-w-lg mx-auto bg-gray-900 dark:bg-zinc-900 rounded-lg shadow-lg shadow-indigo-900/40 border border-purple-800 dark:border-indigo-800 overflow-hidden group">

    <!-- Main Image (Placeholder) -->
    <img src="https://picsum.photos/800/600?random=1" alt="Property Image" class="w-full h-80 object-cover object-center rounded-t-lg group-hover:opacity-75 transition-opacity duration-300">

    <!-- Overlay for Lightbox interaction -->
    <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 cursor-pointer" aria-hidden="true">
      <button type="button" class="text-purple-400 dark:text-indigo-400 text-3xl p-4 rounded-full bg-slate-900/60 hover:bg-slate-800/80 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-indigo-600 transition-all duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
        </svg>
        <span class="sr-only">View Larger</span>
      </button>
    </div>

    <!-- Property Details (Minimal) -->
    <div class="p-4">
      <h3 class="text-xl font-semibold text-purple-300 dark:text-indigo-300 mb-2">Urban Loft 789</h3>
      <p class="text-sm text-gray-400 dark:text-zinc-400 mb-3">District A9, Neo-Kyoto City</p>

      <div class="flex items-center justify-between text-base text-purple-400 dark:text-indigo-400">
        <span class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-purple-600 dark:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L22 21M7.273 6.343L2 2" />
          </svg>
          3 Beds
        </span>
        <span class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-purple-600 dark:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
          </svg>
          2 Baths
        </span>
      </div>
    </div>
  </div>
</div>

Cyberpunk Agricultural Image Lightbox

A complex, responsive image lightbox component with cyberpunk aesthetics, featuring a purple/violet color scheme, designed for agricultural and farming websites. It supports dark mode and displays images with titles, descriptions, and basic metadata.

Open Preview

                <div class="min-h-screen bg-neutral-950 dark:bg-black text-violet-200 p-4 font-mono antialiased">

  <!-- Grid of thumbnail images -->
  <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-fuchsia-600 drop-shadow-md">Neural Crop Database // Image Log</h2>
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-10">
    <!-- Image Thumbnail 1 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/100/1280/720', 'Hydroponic Greens Farm', 'Automated vertical farm cultivating a variety of leafy greens in a controlled environment.', 'Harvest Date: 2077-10-23', 'Sensor Readings: Optimal', 'Operator: Unit 734-Alpha')">
      <img src="https://picsum.photos/id/100/300/200" alt="Hydroponic Greens" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Hydroponic Greens</p>
      </div>
    </div>
    <!-- Image Thumbnail 2 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/101/1280/720', 'Automated Drone Irrigation', 'Precision irrigation drones deployed over a vast bio-engineered wheat field.', 'Last Flight: 2077-10-22', 'Fuel Cell: 98%', 'Unit ID: Drone-004')">
      <img src="https://picsum.photos/id/101/300/200" alt="Automated Drone Irrigation" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Drone Irrigation</p>
      </div>
    </div>
    <!-- Image Thumbnail 3 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/102/1280/720', 'Subterranean Myco-Farm', 'Advanced fungal cultivation in a controlled subterranean environment.', 'Harvest Cycle: Weekly', 'Humidity: 95%', 'Strain: Myco-Synth 001')">
      <img src="https://picsum.photos/id/102/300/200" alt="Subterranean Myco-Farm" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Myco-Farm</p>
      </div>
    </div>
     <!-- Image Thumbnail 4 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/103/1280/720', 'Bioluminescent Algae Tanks', 'Energy-efficient algae bioreactors producing biofuel and agricultural supplements.', 'Biomass Output: High', 'Temp: 28°C', 'Project: Bio-Fuel Nexus')">
      <img src="https://picsum.photos/id/103/300/200" alt="Bioluminescent Algae Tanks" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Algae Tanks</p>
      </div>
    </div>
    <!-- Image Thumbnail 5 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/104/1280/720', 'Urban Vertical Garden', 'Compact automated vertical farm integrated into an urban skyscraper.', 'Crops: Mixed Greens', 'Water Usage: Minimal', 'Location: Sector 7, Rooftop A')">
      <img src="https://picsum.photos/id/104/300/200" alt="Urban Vertical Garden" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Urban Garden</p>
      </div>
    </div>
  </div>

  <!-- The Lightbox Modal -->
  <div id="lightbox-modal" class="fixed inset-0 z-50 hidden bg-neutral-950/70 dark:bg-black/80 backdrop-blur-md flex items-center justify-center p-4 sm:p-6 lg:p-8 transition-opacity duration-300 opacity-0">
    <div class="relative w-full max-w-5xl bg-neutral-900 dark:bg-neutral-800 rounded-lg shadow-2xl border border-purple-800 dark:border-fuchsia-900 transform transition-all duration-300 scale-95">
      <!-- Close button -->
      <button class="absolute top-3 right-3 text-violet-300 hover:text-fuchsia-400 text-3xl font-bold leading-none z-10 transition-colors duration-200" onclick="closeLightbox()">
        &times;
      </button>

      <div class="flex flex-col lg:flex-row">
        <!-- Lightbox Image -->
        <div class="flex-shrink-0 lg:w-2/3 p-4">
          <img id="lightbox-image" src="" alt="" class="w-full h-auto object-contain rounded-md border border-purple-700 dark:border-fuchsia-800">
        </div>

        <!-- Image Details -->
        <div class="lg:w-1/3 p-4 flex flex-col justify-between overflow-y-auto max-h-[80vh]">
          <div>
            <h3 id="lightbox-title" class="text-xl md:text-2xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-fuchsia-500 drop-shadow-sm"></h3>
            <p id="lightbox-description" class="text-sm md:text-base text-violet-300 mb-4"></p>

            <div class="space-y-1 text-xs md:text-sm text-violet-400/80">
              <p><strong class="text-purple-300">// Date:</strong> <span id="lightbox-meta1"></span></p>
              <p><strong class="text-purple-300">// Status:</strong> <span id="lightbox-meta2"></span></p>
              <p><strong class="text-purple-300">// Ref_ID:</strong> <span id="lightbox-meta3"></span></p>
            </div>
          </div>

          <!-- Action Buttons / Other Info -->
          <div class="mt-6 pt-4 border-t border-purple-800/50">
            <button class="w-full bg-gradient-to-r from-purple-700 to-fuchsia-700 hover:from-purple-600 hover:to-fuchsia-600 text-white font-semibold py-2 px-4 rounded-md transition-all duration-300 drop-shadow-lg text-sm md:text-base">
              Download Log Data <span class="ml-1">&gt;</span>
            </button>
            <p class="text-xs text-violet-500 mt-2 text-center">Secure Protocol v3.1_AX</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Simple toggle for dark mode (for demonstration) -->
  <div class="fixed bottom-4 left-4 p-2 bg-neutral-800/70 border border-purple-800 rounded-lg shadow-lg flex items-center space-x-2">
    <label for="dark-mode-toggle" class="text-violet-300 text-xs md:text-sm">Dark Mode</label>
    <input type="checkbox" id="dark-mode-toggle" class="w-4 h-4 text-fuchsia-500 bg-neutral-700 border-purple-600 rounded focus:ring-fuchsia-500" onclick="document.documentElement.classList.toggle('dark')">
  </div>

  <script>
    function openLightbox(imageUrl, title, description, meta1, meta2, meta3) {
      const lightbox = document.getElementById('lightbox-modal');
      document.getElementById('lightbox-image').src = imageUrl;
      document.getElementById('lightbox-title').textContent = title;
      document.getElementById('lightbox-description').textContent = description;
      document.getElementById('lightbox-meta1').textContent = meta1;
      document.getElementById('lightbox-meta2').textContent = meta2;
      document.getElementById('lightbox-meta3').textContent = meta3;
      lightbox.classList.remove('hidden', 'opacity-0');
      lightbox.classList.add('flex');
      setTimeout(() => {
        lightbox.classList.remove('opacity-0');
        document.querySelector('#lightbox-modal > div').classList.remove('scale-95');
        document.querySelector('#lightbox-modal > div').classList.add('scale-100');
      }, 50);
    }

    function closeLightbox() {
      const lightbox = document.getElementById('lightbox-modal');
       document.querySelector('#lightbox-modal > div').classList.remove('scale-100');
       document.querySelector('#lightbox-modal > div').classList.add('scale-95');
      lightbox.classList.add('opacity-0');
      setTimeout(() => {
        lightbox.classList.remove('flex');
        lightbox.classList.add('hidden');
      }, 300);
    }

    // Close lightbox on escape key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        closeLightbox();
      }
    });

    // Close lightbox when clicking outside the content
    document.getElementById('lightbox-modal').addEventListener('click', (e) => {
      if (e.target.id === 'lightbox-modal') {
        closeLightbox();
      }
    });
  </script>
</div>

Image Lightbox Component

A responsive image lightbox component with Skeuomorphism design, vibrant colors, and dark mode support, built with Tailwind CSS. No JavaScript for enhanced performance.

Open Preview

                <div class="relative w-full h-full bg-gradient-to-br from-gray-800 to-black p-8 md:p-12 font-sans overflow-hidden">

  <!-- Skeuomorphism background texture -->
  <div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('https://grainy-gradients.vercel.app/gradients/png/new-42.png');"></div>

  <!-- Lightbox Container -->
  <div class="relative z-10 max-w-6xl mx-auto bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_20px_50px_rgba(0,0,0,0.5),0_0_0_1px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_20px_50px_rgba(0,0,0,0.8),0_0_0_1px_rgba(0,0,0,0.3)] p-6 md:p-10 border border-gray-300 dark:border-gray-600">

    <!-- Header -->
    <div class="flex justify-between items-center mb-8 pb-4 border-b border-gray-300 dark:border-gray-600">
      <h1 class="text-4xl md:text-5xl font-extrabold text-indigo-700 dark:text-indigo-400 drop-shadow-lg [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
        Gallery Showcase
      </h1>
      <div class="flex space-x-3">
        <button class="w-10 h-10 rounded-full bg-red-500 hover:bg-red-600 transition-all duration-300 transform hover:scale-105 shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_2px_4px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_2px_4px_rgba(0,0,0,0.6)] flex items-center justify-center text-white text-xl font-bold">
          <span class="sr-only">Close</span> &times;
        </button>
        <button class="w-10 h-10 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-all duration-300 transform hover:scale-105 shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_2px_4px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_2px_4px_rgba(0,0,0,0.6)] flex items-center justify-center text-white text-xl font-bold">
          <span class="sr-only">Minimize</span> &#8211;
        </button>
        <button class="w-10 h-10 rounded-full bg-green-500 hover:bg-green-600 transition-all duration-300 transform hover:scale-105 shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_2px_4px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_2px_4px_rgba(0,0,0,0.6)] flex items-center justify-center text-white text-xl font-bold">
          <span class="sr-only">Maximize</span> &#x25A1;
        </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Image Preview Section -->
      <div class="relative bg-gray-100 dark:bg-gray-800 rounded-2xl p-4 shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_5px_15px_rgba(0,0,0,0.2)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_15px_rgba(0,0,0,0.5)] border border-gray-300 dark:border-gray-700">
        <img src="https://picsum.photos/id/1018/800/600" alt="Featured Image" class="w-full h-auto rounded-xl object-cover shadow-lg border-4 border-gray-200 dark:border-gray-700 transition-all duration-500 hover:scale-[1.02] cursor-pointer" />
        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-30 rounded-2xl pointer-events-none"></div>

        <!-- Navigation Buttons -->
        <div class="absolute top-1/2 left-0 right-0 flex justify-between px-4 transform -translate-y-1/2">
          <button class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-white text-3xl flex items-center justify-center shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_10px_rgba(0,0,0,0.5)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_10px_rgba(0,0,0,0.8)] border border-indigo-400 dark:border-violet-700 transition-all duration-300 hover:scale-105 active:scale-95">
            &#8592;
          </button>
          <button class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-white text-3xl flex items-center justify-center shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_10px_rgba(0,0,0,0.5)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_10px_rgba(0,0,0,0.8)] border border-indigo-400 dark:border-violet-700 transition-all duration-300 hover:scale-105 active:scale-95">
            &#8594;
          </button>
        </div>
      </div>

      <!-- Details and Thumbnails Section -->
      <div class="flex flex-col space-y-6">

        <!-- Image Title & Description -->
        <div class="bg-gradient-to-br from-white to-gray-200 dark:from-gray-800 dark:to-gray-900 p-6 rounded-2xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_5px_15px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_15px_rgba(0,0,0,0.4)] border border-gray-300 dark:border-gray-700">
          <h2 class="text-3xl font-bold text-teal-600 dark:text-teal-400 mb-3 drop-shadow [text-shadow:_0_1px_0_rgb(0_0_0_/_30%)]">Forest Pathway</h2>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">A serene pathway winding through a dense, vibrant forest, bathed in dappled sunlight. Perfect for a peaceful stroll or deep contemplation.</p>

          <!-- Author Info -->
          <div class="flex items-center mt-5 pt-4 border-t border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-indigo-500 dark:border-purple-400 shadow-md" />
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">By John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Published on Oct 26, 2023</p>
            </div>
          </div>
        </div>

        <!-- Thumbnails Grid -->
        <div class="p-4 bg-gradient-to-br from-indigo-500 to-violet-600 rounded-2xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_15px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_15px_rgba(0,0,0,0.7)] border border-indigo-400 dark:border-violet-700">
          <h3 class="text-2xl font-bold text-white mb-4 [text-shadow:_0_2px_0_rgb(0_0_0_/_30%)]">More from this collection:</h3>
          <div class="grid grid-cols-3 gap-4">
            <img src="https://picsum.photos/id/1003/150/150" alt="Thumbnail 1" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1015/150/150" alt="Thumbnail 2" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1016/150/150" alt="Thumbnail 3" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1019/150/150" alt="Thumbnail 4" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1024/150/150" alt="Thumbnail 5" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1025/150/150" alt="Thumbnail 6" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
          </div>
        </div>
      </div>
    </div>

    <!-- Call to Action / Footer -->
    <div class="mt-10 pt-6 border-t border-gray-300 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-center">
      <a href="#" class="inline-block px-8 py-3 bg-teal-500 hover:bg-teal-600 text-white font-bold rounded-xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_10px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_10px_rgba(0,0,0,0.7)] transition-all duration-300 transform hover:scale-105 tracking-wide text-lg text-center">
        Download High-Res
      </a>
      <p class="text-gray-600 dark:text-gray-400 text-sm mt-4 sm:mt-0">© 2023 Skew Photo Gallery. All rights reserved.</p>
    </div>

  </div>
</div>

Skeuomorphic Image Lightbox

A responsive image lightbox component with a skeuomorphic grayscale design for portfolios, supporting dark mode.

Open Preview

                
<div class="p-4 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Lightbox Item 1 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/600/400?random=1" alt="Portfolio Image 1" class="w-full h-64 object-cover rounded-lg shadow-xl 
                  transform transition-transform duration-300 group-hover:scale-105 
                  border-4 border-gray-300 dark:border-gray-700 
                  group-hover:border-gray-500 dark:group-hover:border-gray-400">
      <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 
                  flex items-center justify-center transition-opacity duration-300 rounded-lg 
                  border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
        <p class="text-white text-lg font-bold">View Project</p>
      </div>
    </div>

    <!-- Lightbox Item 2 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/600/400?random=2" alt="Portfolio Image 2" class="w-full h-64 object-cover rounded-lg shadow-xl 
                  transform transition-transform duration-300 group-hover:scale-105 
                  border-4 border-gray-300 dark:border-gray-700 
                  group-hover:border-gray-500 dark:group-hover:border-gray-400">
      <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 
                  flex items-center justify-center transition-opacity duration-300 rounded-lg 
                  border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
        <p class="text-white text-lg font-bold">View Project</p>
      </div>
    </div>

    <!-- Lightbox Item 3 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/600/400?random=3" alt="Portfolio Image 3" class="w-full h-64 object-cover rounded-lg shadow-xl 
                  transform transition-transform duration-300 group-hover:scale-105 
                  border-4 border-gray-300 dark:border-gray-700 
                  group-hover:border-gray-500 dark:group-hover:border-gray-400">
      <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 
                  flex items-center justify-center transition-opacity duration-300 rounded-lg 
                  border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
        <p class="text-white text-lg font-bold">View Project</p>
      </div>
    </div>

    <!-- Add more lightbox items as needed -->

  </div>
</div>

Image Lightbox Component

A retro/vintage image lightbox component with vibrant colors, responsive design, and dark theme support, suitable for portfolios.

Open Preview

                <div class="p-8 bg-gradient-to-br from-purple-700 via-pink-500 to-red-500 dark:from-gray-900 dark:via-purple-900 dark:to-black min-h-screen">
  <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-8 text-center drop-shadow-lg font-mono">My Rad Portfolio</h1>
  
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Image 1 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/vintage1/600/400" alt="Portfolio Image 1" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Project Alpha</p>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/retro2/600/400" alt="Portfolio Image 2" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Cyberpunk City</p>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/80sglitch/600/400" alt="Portfolio Image 3" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Neon Dreams</p>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/vaporwave/600/400" alt="Portfolio Image 4" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Synthwave Sunset</p>
      </div>
    </div>
    
    <!-- Image 5 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/gridscape/600/400" alt="Portfolio Image 5" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Pixel Paradise</p>
      </div>
    </div>

    <!-- Image 6 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/datascape/600/400" alt="Portfolio Image 6" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Binary Bliss</p>
      </div>
    </div>
  </div>

  <!-- Retro Footer -->
  <footer class="mt-16 text-center text-white text-lg font-mono drop-shadow-md">
    <p>&copy; 2023 My Rad Portfolio. All Rights Reserved, Dude.</p>
  </footer>
</div>

Image Lightbox Component

A responsive image lightbox component with dark mode support. This component displays a gallery of images, and clicking on an image opens a full-screen modal with navigation arrows to browse through the images. It features a close button and uses vibrant colors for highlighting interactive elements. The design is tailored for a business/corporate context, ensuring a professional yet engaging user experience.

Open Preview

                <div class="bg-gray-900 min-h-screen p-8">
  <h1 class="text-4xl font-bold text-white mb-8 text-center">Our Work</h1>

  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
    <!-- Image 1 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img1')">
      <img id="img1-thumb" src="https://picsum.photos/seed/picsum1/400/300" alt="Image 1" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 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 duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img2')">
      <img id="img2-thumb" src="https://picsum.photos/seed/picsum2/400/300" alt="Image 2" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 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 duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img3')">
      <img id="img3-thumb" src="https://picsum.photos/seed/picsum3/400/300" alt="Image 3" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 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 duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img4')">
      <img id="img4-thumb" src="https://picsum.photos/seed/picsum4/400/300" alt="Image 4" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 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 duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 5 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img5')">
      <img id="img5-thumb" src="https://picsum.photos/seed/picsum5/400/300" alt="Image 5" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 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 duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 6 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img6')">
      <img id="img6-thumb" src="https://picsum.photos/seed/picsum6/400/300" alt="Image 6" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 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 duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>
  </div>

  <!-- Lightbox Modal -->
  <div id="lightbox-modal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden">
    <div class="relative w-11/12 max-w-4xl max-h-[90vh] flex flex-col">
      <button class="absolute top-4 right-4 text-white text-3xl font-bold p-2 hover:text-red-500 transition-colors duration-300 z-10" onclick="closeLightbox()">&times;</button>
      <img id="lightbox-img" src="" alt="Lightbox Image" class="max-w-full max-h-full object-contain rounded-lg shadow-xl"/>
      <div class="absolute bottom-4 left-0 right-0 flex justify-between px-4">
        <button class="bg-purple-600 text-white p-3 rounded-full hover:bg-purple-700 transition-colors duration-300 shadow-lg" onclick="changeImage(-1)">
          <svg xmlns="http://www.w3.org/2000/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="M15 19l-7-7 7-7" />
          </svg>
        </button>
        <button class="bg-purple-600 text-white p-3 rounded-full hover:bg-purple-700 transition-colors duration-300 shadow-lg" onclick="changeImage(1)">
          <svg xmlns="http://www.w3.org/2000/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="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
      <p id="lightbox-caption" class="text-white text-center mt-4 text-lg"></p>
    </div>
  </div>
</div>

<script>
  const images = [
    { id: 'img1', src: 'https://picsum.photos/seed/picsum1/800/600', caption: 'Project Alpha - Innovative Solutions' },
    { id: 'img2', src: 'https://picsum.photos/seed/picsum2/800/600', caption: 'Project Beta - Strategic Partnerships' },
    { id: 'img3', src: 'https://picsum.photos/seed/picsum3/800/600', caption: 'Project Gamma - Creative Designs' },
    { id: 'img4', src: 'https://picsum.photos/seed/picsum4/800/600', caption: 'Project Delta - Digital Transformation' },
    { id: 'img5', src: 'https://picsum.photos/seed/picsum5/800/600', caption: 'Project Epsilon - Global Reach' },
    { id: 'img6', src: 'https://picsum.photos/seed/picsum6/800/600', caption: 'Project Zeta - Future Technologies' }
  ];
  let currentIndex = 0;

  function openLightbox(imageId) {
    const index = images.findIndex(img => img.id === imageId);
    if (index !== -1) {
      currentIndex = index;
      updateLightboxContent();
      document.getElementById('lightbox-modal').classList.remove('hidden');
    }
  }

  function closeLightbox() {
    document.getElementById('lightbox-modal').classList.add('hidden');
  }

  function changeImage(direction) {
    currentIndex = (currentIndex + direction + images.length) % images.length;
    updateLightboxContent();
  }

  function updateLightboxContent() {
    const currentImage = images[currentIndex];
    document.getElementById('lightbox-img').src = currentImage.src;
    document.getElementById('lightbox-caption').textContent = currentImage.caption;
  }

  // Close lightbox on escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      closeLightbox();
    }
  });
</script>

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.

Open Preview

                <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">&times;</button>
        </div>
    </div>
</div>

Image Lightbox Component

A complex Image Lightbox component designed with skeuomorphic elements and a pastel color scheme, suitable for dashboard environments. It includes a responsive layout, dark theme support, and an interactive interface.

Open Preview

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-75 dark:bg-black">
    <div class="bg-gradient-to-br from-pink-300 to-blue-300 rounded-xl shadow-xl p-5 w-full max-w-3xl relative">
        <button class="absolute top-2 right-2 text-gray-700 dark:text-gray-300 font-bold text-lg hover:text-gray-900 dark:hover:text-white transition">
            &times;
        </button>
        <div class="flex justify-center mb-5">
            <img src="https://picsum.photos/600/400" alt="Lightbox Image" class="rounded-lg shadow-lg max-w-full h-auto brightness-90 dark:brightness-75">
        </div>
        <div class="grid grid-cols-3 gap-4">
            <img src="https://picsum.photos/200/150?random=1" alt="Thumbnail 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=2" alt="Thumbnail 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=3" alt="Thumbnail 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=4" alt="Thumbnail 4" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=5" alt="Thumbnail 5" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=6" alt="Thumbnail 6" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
        </div>
        <div class="flex justify-between items-center mt-5">
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Previous</button>
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Next</button>
        </div>
    </div>
</div>

Image Lightbox Component

A responsive Image Lightbox component designed with 3D elements, vibrant colors and moderate complexity for business/corporate websites. It supports dark mode styling using Tailwind CSS.

Open Preview

                <div class="relative p-4 max-w-lg mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Thumbnail Images -->
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=1" alt="Image 1" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=2" alt="Image 2" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=3" alt="Image 3" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=4" alt="Image 4" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Dark Mode Support -->
<style>
    .bg-vibrant-500 {
        background-color: #ff4c4c; /* Example vibrant color */
    }

    @media (prefers-color-scheme: dark) {
        .bg-vibrant-500 {
            background-color: #ff6b6b; /* Dark mode vibrant color */
        }
    }
</style>

Search Components

Categories

Image Lightbox