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 de lightbox d’image complexe et réactif avec un design inspiré du papier/de l’impression, une palette de couleurs aux tons de bijou et une prise en charge du mode sombre, adapté aux plates-formes musicales/audio. Il comporte de riches éléments interactifs.
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.
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.