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 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.
Composant Lightbox d’image
Un composant Image Lightbox réactif conçu dans le style Material Design, avec une palette de couleurs triadique et la prise en charge du mode sombre. Il convient pour présenter des portfolios ou des produits.
Composant Lightbox d’image
Un composant de lightbox d’image réactive conçu en mode sombre à l’aide de Tailwind CSS. Il présente un arrière-plan sombre, des effets d’opacité et des conceptions réactives pour s’adapter à différentes tailles d’écran.