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 d’image Lightbox réactif conçu pour le commerce électronique avec un style de design plat minimaliste, prenant en charge les thèmes clairs et sombres à l’aide de Tailwind CSS.
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 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.