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.
HTML Code
<div class="relative">
<!-- Lightbox trigger -->
<div class="group cursor-pointer">
<img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-full h-auto rounded-lg border-2 border-gray-700 dark:border-gray-300 transition-all duration-300 ease-in-out hover:scale-105">
</div>
<!-- Lightbox overlay -->
<div class="hidden group-hover:block fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center transition-opacity duration-300">
<div class="relative p-4">
<img src="https://picsum.photos/800/600" alt="Lightbox Image" class="max-w-full max-h-[90vh] rounded-lg border-4 border-yellow-500 dark:border-cyan-400 shadow-2xl">
<button class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full hover:bg-red-700 transition-colors duration-300">Close</button>
</div>
</div>
</div>
<!-- Avatar Section -->
<div class="mt-4 flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-700 dark:border-gray-300">
<div class="text-lg text-gray-800 dark:text-gray-200">
<h3 class="font-bold">User Name</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">User Role</p>
</div>
</div>Composants associés
Composant Lightbox d’image
Un composant Image Lightbox réactif conçu pour le commerce électronique, avec prise en charge du mode sombre et une palette de couleurs de tons de terre.
Composant Lightbox d’image
Un composant Image Lightbox réactif conçu avec des éléments 3D, des couleurs vives et une complexité modérée pour les sites Web d’entreprise. Il prend en charge le style du mode sombre à l’aide de Tailwind CSS.
Composant Lightbox d’image
Un composant de lightbox d’image réactif avec un design plat minimaliste, une palette de couleurs monochromatique et une complexité modérée, adapté aux interfaces de médias sociaux. Il prend en charge un thème sombre à l’aide du préfixe dark : de Tailwind CSS et ne nécessite pas de JavaScript. Les images proviennent de picsum.photos.