Composant Lightbox d’image
Un composant lightbox d’image skeuomorphe conçu pour imiter ses homologues du monde réel, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative group w-full max-w-2xl bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/600/400" alt="Lightbox Image" class="w-full h-auto rounded-lg transition ease-in-out duration-300 transform group-hover:scale-105" />
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition-opacity duration-300 rounded-lg"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 text-white">
<h2 class="font-bold text-lg">Image Title</h2>
<p class="text-sm">Image description goes here.</p>
</div>
</div>
<div class="mt-4">
<button class="p-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 shadow-lg">
<span class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
View User's Images
</span>
</button>
</div>
</div>Composants associés
Composant Lightbox d’image
Un composant de lightbox d’image réactive conçu dans un style brutaliste avec des tons de terre. Il dispose d’une prise en charge du mode sombre pour la visualisation du tableau de bord.
Composant Lightbox d’image
Un composant Image Lightbox de style brutaliste adapté à un blog ou à une plate-forme de contenu, conçu avec des tons de terre et des éléments interactifs complexes.