Composant Galerie

Un composant de galerie de style rétro vintage avec des effets réactifs et la prise en charge du thème sombre.

Aperçu

HTML Code

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Retro Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=4" alt="Gallery Image 4" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=5" alt="Gallery Image 5" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=6" alt="Gallery Image 6" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=7" alt="Gallery Image 7" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=8" alt="Gallery Image 8" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-white { background-color: #1a202c; }
        .text-gray-800 { color: #edf2f7; }
    }
</style>

Composants associés

Composant Galerie

Composant de galerie réactive avec conception 3D, schéma de couleurs analogues et prise en charge du mode sombre pour les interfaces de médias sociaux.

Ouvrir

Composant Neumorphism Gallery

Un composant de galerie Neumorphic réactif avec prise en charge du mode sombre. Les images sont des espaces réservés de picsum.photos et des avatars de randomuser.me.

Ouvrir

Composant Galerie Rétro

Un composant de galerie réactif avec un style rétro/vintage, une palette de couleurs vives et une mise en page simple pour la consommation de blog/contenu, avec prise en charge du mode sombre. Utilise Tailwind CSS.

Ouvrir