Image Lightbox Component
A retro/vintage image lightbox component with vibrant colors, responsive design, and dark theme support, suitable for portfolios.
HTML Code
<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>© 2023 My Rad Portfolio. All Rights Reserved, Dude.</p>
</footer>
</div>Related Components
Image Lightbox Component
A skeuomorphic image lightbox component designed to mimic real-world counterparts, featuring responsive effects and dark theme support using Tailwind CSS.
Image Lightbox Component
A responsive Image Lightbox component designed in Material Design style, featuring a triadic color scheme and support for dark mode. It's suitable for portfolio showcasing work or products.
Image Lightbox Component
A responsive image lightbox component designed for dashboards, featuring a 3D style and monochromatic color scheme. It includes hover effects and modal functionality using Tailwind CSS for dark mode support.