CCHub Logo CCHub Tailwind Collection
Komponenten Galerie Galerie-Komponente

Galerie-Komponente

Eine responsive Galeriekomponente mit Mikrointeraktionen für soziale Medien, die mit einem dunklen Theme und einem einfachen Layout mit Tailwind CSS gestaltet wurde.

Vorschau

HTML-Code 

<div class="container mx-auto p-4">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Gallery image 1" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-blue-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">John Doe</span>
                </div>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/201?random=2" alt="Gallery image 2" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-green-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">Jane Smith</span>
                </div>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/202?random=3" alt="Gallery image 3" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-purple-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">Michael Johnson</span>
                </div>
            </div>
        </div>
        <!-- Repeat as necessary for more images -->
    </div>
</div>

Verwandte Komponenten

Galerie-Komponente

Eine reaktionsschnelle Galerie-Komponente, die Tailwind CSS mit Material Design-Stil verwendet und für ein Dashboard mit Unterstützung für dunkle Themen geeignet ist.

Offen

Skeuomorphism Grayscale Gallery-Komponente

Responsive Fotogalerie mit Skeuomorphismus-Design, Graustufen-Farbschema und komplexem Layout für soziale Medien. Enthält Unterstützung für dunkle Themen.

Offen

Galerie-Komponente

Eine Galeriekomponente im Neumorphism-Stil mit Erdtönen für Blog-/Inhaltszwecke. Diese Komponente verfügt über eine umfangreiche Benutzeroberfläche mit mehreren interaktiven Elementen, responsivem Design und Unterstützung für dunkle Themen.

Offen