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.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 hidden dark:block" id="lightbox">
<div class="relative bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<button class="absolute top-3 right-3 text-white focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">×</button>
<img class="w-full h-auto" src="https://picsum.photos/800/600" alt="Product Image">
<div class="p-4">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="text-white">
<p class="text-sm font-semibold">John Doe</p>
<p class="text-xs text-gray-400">E-commerce Store</p>
</div>
</div>
<p class="mt-2 text-xs text-gray-300">Image description or product details can go here.</p>
</div>
</div>
</div>
<div class="flex justify-center py-6">
<button class="bg-green-600 text-white py-2 px-4 rounded-lg focus:outline-none hover:bg-green-500" onclick="document.getElementById('lightbox').classList.remove('hidden')">
Open Lightbox
</button>
</div>Composants associés
Composant de boîte lumineuse d’image - Violet skeuomorphe
Un composant de lightbox d’image simple et réactif avec un design skeuomorphe dans le spectre violet/violet, adapté aux plateformes d’emploi/de carrière. Inclut la prise en charge du mode sombre.
Composant Lightbox d’image
Composant Lightbox d’image minimaliste avec un design réactif et la prise en charge du thème sombre à des fins de tableau de bord. Utilise picsum.photos pour les images.
Composant Lightbox d’image
Un composant de lightbox d’image réactif avec des couleurs neutres froides, des transitions de dégradé et une prise en charge du mode sombre, adapté aux services de conseil professionnels.