CCHub Logo CCHub Tailwind Collection
Komponenten Galerie Galerie-Komponente

Galerie-Komponente

Eine responsive Galeriekomponente mit einem minimalistischen, flachen Design mit Bildern und Unterstützung für dunkle Themen mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image 1" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image 2" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image 3" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image 4" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=5" alt="Random Image 5" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=6" alt="Random Image 6" class="w-full h-auto object-cover">
        </div>
    </div>
</div>

Verwandte Komponenten

Retro-Galerie-Komponente

Eine reaktionsschnelle Galeriekomponente im Retro-/Vintage-Stil, einem lebendigen Farbschema und einem einfachen Layout für den Konsum von Blogs / Inhalten mit Unterstützung für den Dunkelmodus. Verwendet Tailwind CSS.

Offen

Neumorphism-Galerie-Komponente

Eine reaktionsschnelle Neumorphic-Galeriekomponente mit Unterstützung für den Dunkelmodus. Bilder sind Platzhalter aus picsum.photos und Avatare aus randomuser.me.

Offen

Luxus-Galerie-Komponente

Eine elegante und ausgefeilte Galerie-Komponente, die für Musik- und Audioplattformen entwickelt wurde, mit warmen Neutraltönen, reaktionsschnellen Layouts und Unterstützung für den Dunkelmodus.

Offen