CCHub Logo CCHub Tailwind Collection
Komponenten Produktkarten Komponente "Produktkarten"

Komponente "Produktkarten"

Eine responsive Produktkartenkomponente, die nach den Prinzipien des Material Designs mit Tailwind CSS entwickelt wurde. Es unterstützt den Dunkelmodus und bietet Schatten und rasterbasierte Layouts.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Product Cards</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150?random=1" alt="Product Image" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
                <p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150?random=2" alt="Product Image" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h3>
                <p class="text-gray-600 dark:text-gray-400">$39.99</p>
                <p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150?random=3" alt="Product Image" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 3</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
                <p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Produktkarten"

Skeuomorphic Product Cards Component für Dashboard mit responsivem Design und Unterstützung für dunkle Themen.

Offen

Komponente "Produktkarten"

Eine reaktionsschnelle Produktkartenkomponente im Material Design-Stil mit einem Graustufen-Farbschema. Es enthält ein Bild, einen Titel, eine Beschreibung und eine Schaltfläche mit Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Komponente "Produktkarten"

Eine responsive Produktkartenkomponente mit Glassmorphism-Design, Graustufen-Farbschema und Unterstützung für dunkle Themen. Es enthält mehrere interaktive Elemente, die für Social-Media-Schnittstellen geeignet sind, wie z. B. Produktbild, Titel, Beschreibung, Preis und Schaltfläche "In den Warenkorb". Das Design verwendet frosterglasähnliche, durchscheinende Elemente mit Unschärfeeffekten. Es wird kein Javascript verwendet, nur HTML mit Tailwind CSS-Klassen.

Offen