Composant Lightbox d’image
Un composant lightbox d’image rétro/vintage avec des couleurs vives, un design réactif et une prise en charge du thème sombre, adapté aux portefeuilles.
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>Composants associés
Composant Lightbox d’image
Un composant de lightbox d’image réactive conçu avec le style Glassmorphism à l’aide de Tailwind CSS. Le composant prend en charge un thème sombre avec des éléments translucides givrés ressemblant à du verre et des effets de flou.
Composant Lightbox d’image
Un composant simple de lightbox d’image réactive conçu pour les sites Web de commerce électronique, avec un style de mode sombre et une palette de couleurs analogue.
Composant Lightbox d’image
Un composant de visionneuse d’images ludique et amusant pour les outils CRM/Business, avec une palette de couleurs en niveaux de gris, des éléments arrondis et une interface complexe pour la visualisation interactive des images. Entièrement réactif avec prise en charge du mode sombre.