Composants Boîte lumineuse d’image Composant Lightbox d’image

Composant Lightbox d’image

Un composant de lightbox d’image réactif avec un thème rétro/vintage utilisant Tailwind CSS, prenant en charge le mode sombre et présentant des images de remplacement.

Aperçu

HTML Code

<div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <img id="lightbox-trigger" src="https://picsum.photos/600/400?random=1" class="w-full h-48 object-cover rounded-t-lg" alt="Vintage Image">
    <div class="p-4">
        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Vintage Aesthetic</h2>
        <p class="text-gray-600 dark:text-gray-400">A nostalgic look into the past with a touch of modern design.</p>
    </div>
    <div class="flex justify-center pb-4">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">View More Images</button>
    </div>
    <div id="lightbox" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
        <span class="absolute top-4 right-4 text-white cursor-pointer" onclick="document.getElementById('lightbox').classList.add('hidden')">&times;</span>
        <img src="https://picsum.photos/1200/800?random=1" class="max-w-full max-h-full rounded shadow-lg" alt="Lightbox Image">
    </div>
</div>

<style>
    /* Dark mode styling */
    @media (prefers-color-scheme: dark) {
        .bg-white {
            background-color: #1f2937;
        }
        .text-gray-800 {
            color: #e5e7eb;
        }
        .text-gray-600 {
            color: #d1d5db;
        }
    }
</style>

Composants associés

Cyberpunk_Real_Estate_Lightbox

Un composant de lightbox d’image simple et réactif avec une palette de couleurs sourdes inspirée du cyberpunk, adapté aux annonces immobilières. Prend en charge le mode sombre et utilise le HTML sémantique.

Ouvrir

Gaming 3D Violet Lightbox

Un composant de lightbox d’image simple et réactif avec des éléments de conception 3D et une palette de couleurs violet/violet, adapté aux sites Web de jeux.

Ouvrir

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.

Ouvrir