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.
HTML Code
<div class="relative p-4 max-w-lg mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Thumbnail Images -->
<div class="group">
<div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/400/300?random=1" alt="Image 1" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
<button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
</div>
</div>
</div>
<div class="group">
<div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/400/300?random=2" alt="Image 2" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
<button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
</div>
</div>
</div>
<div class="group">
<div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/400/300?random=3" alt="Image 3" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
<button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
</div>
</div>
</div>
<div class="group">
<div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/400/300?random=4" alt="Image 4" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
<button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
</div>
</div>
</div>
</div>
</div>
<!-- Dark Mode Support -->
<style>
.bg-vibrant-500 {
background-color: #ff4c4c; /* Example vibrant color */
}
@media (prefers-color-scheme: dark) {
.bg-vibrant-500 {
background-color: #ff6b6b; /* Dark mode vibrant color */
}
}
</style>Composants associés
Composant Lightbox d’image
Un composant de lightbox d’image réactif conçu pour les tableaux de bord, avec un style 3D et une palette de couleurs monochromatiques. Il comprend des effets de survol et une fonctionnalité modale utilisant Tailwind CSS pour la prise en charge du mode sombre.
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.
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.