Componentes de búsqueda

Categorías

Componentes Caja de luz de imagen

Caja de luz de imagen

Vista ampliada de imágenes con efecto de superposición

Memphis_Monochrome_Image_Lightbox

Un componente de caja de luz de imagen simple y receptivo con una influencia de Memphis Design, con una paleta monocromática con un solo color de acento brillante. Diseñado para plataformas de empleo/carrera.

Abrir Vista previa

                <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

Un componente de caja de luz de imagen simple y receptivo con un esquema de color apagado inspirado en el cyberpunk, adecuado para listados de propiedades inmobiliarias. Cuenta con soporte para el modo oscuro y utiliza HTML semántico.

Abrir Vista previa

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

Caja de luz de imagen agrícola cyberpunk

Un componente de caja de luz de imagen complejo y receptivo con estética cyberpunk, con un esquema de color púrpura/violeta, diseñado para sitios web agrícolas y de ganadería. Es compatible con el modo oscuro y muestra imágenes con títulos, descripciones y metadatos básicos.

Abrir Vista previa

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

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo con diseño de Skeuomorphism, colores vibrantes y compatibilidad con modo oscuro, construido con Tailwind CSS. Sin JavaScript para mejorar el rendimiento.

Abrir Vista previa

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

Caja de luz de imagen esqueuomórfica

Un componente de caja de luz de imagen receptivo con un diseño de escala de grises esqueuomórfico para carteras, compatible con el modo oscuro.

Abrir Vista previa

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

Componente de caja de luz de imagen

Un componente de caja de luz de imagen retro/vintage con colores vibrantes, diseño responsivo y compatibilidad con temas oscuros, adecuado para portafolios.

Abrir Vista previa

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

Componente de caja de luz de imagen

Un componente de caja de luz de imagen sensible con soporte para modo oscuro. Este componente muestra una galería de imágenes y, al hacer clic en una imagen, se abre un modal de pantalla completa con flechas de navegación para navegar por las imágenes. Cuenta con un botón de cierre y utiliza colores vibrantes para resaltar elementos interactivos. El diseño se adapta a un contexto empresarial/corporativo, lo que garantiza una experiencia de usuario profesional pero atractiva.

Abrir Vista previa

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

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptiva con un diseño plano minimalista, combinación de colores monocromática y complejidad moderada, adecuado para interfaces de redes sociales. Es compatible con un tema oscuro que utiliza el prefijo dark: de Tailwind CSS y no requiere JavaScript. Las imágenes provienen de picsum.photos.

Abrir Vista previa

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

Componente de caja de luz de imagen

Un componente complejo de Image Lightbox diseñado con elementos skeuomórficos y una combinación de colores pastel, adecuado para entornos de tablero. Incluye un diseño responsivo, soporte para temas oscuros y una interfaz interactiva.

Abrir Vista previa

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

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo diseñado con elementos 3D, colores vibrantes y complejidad moderada para sitios web comerciales / corporativos. Es compatible con el estilo del modo oscuro mediante Tailwind CSS.

Abrir Vista previa

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