CCHub Logo CCHub Tailwind Collection
Komponenten Produktgalerie Komponente "Produktgalerie"

Komponente "Produktgalerie"

Eine reaktionsschnelle Produktgalerie-Komponente, die für den Dunkelmodus entwickelt wurde und Bilder und Avatare mit Tailwind CSS enthält.

Vorschau

HTML-Code 

<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 1</h3>
                <p class="text-gray-400">$29.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 2</h3>
                <p class="text-gray-400">$39.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 3</h3>
                <p class="text-gray-400">$49.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 4</h3>
                <p class="text-gray-400">$59.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 5</h3>
                <p class="text-gray-400">$69.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 6</h3>
                <p class="text-gray-400">$79.99</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-xl font-semibold mb-2">Featured Seller</h2>
        <div class="flex items-center bg-gray-800 p-3 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <p class="font-semibold">John Doe</p>
                <p class="text-gray-400">Best Seller</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Produktgalerie"

Eine Produktgalerie-Komponente, die im Material Design-Stil mit einem triadischen Farbschema entworfen wurde. Es bietet rasterbasierte Layouts, reaktionsschnelle Animationen und unterstützt dunkle Themen. Die Galerie enthält Bilder und Avatare und eignet sich für ein Dashboard.

Offen

Komponente "Produktgalerie"

Eine reaktionsschnelle Produktgalerie-Komponente, die im Brutalismus-Stil mit einem pastellfarbenen Farbschema gestaltet ist, das für soziale Medien geeignet ist. Es zeichnet sich durch einen hohen Kontrast und auffällige Designelemente aus und ist für den Dunkelmodus optimiert.

Offen

Komponente "Produktgalerie"

Eine reaktionsschnelle Produktgalerie-Komponente, die mit dem Neumorphismus-Stil und einem triadischen Farbschema gestaltet wurde und sich für die Präsentation von Arbeiten oder Produkten eignet, mit Unterstützung für dunkle Themen.

Offen