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"

Eine reaktionsschnelle Produktkartenkomponente mit Retro-/Vintage-Design, analogem Farbschema und Unterstützung für dunkle Themen, die für ein Dashboard geeignet ist. Das Design enthält Platzhalter für Bilder und Produktdetails.

Offen

Komponente "Produktkarten"

Eine reaktionsschnelle Produktkartenkomponente mit 3D-Design, analogem Farbschema und Unterstützung für den Dunkelmodus, die für Social-Media-Schnittstellen entwickelt wurde.

Offen

Komponente "Produktkarten"

Eine reaktionsschnelle Produktkartenkomponente mit Mikrointeraktionen in Erdtönen, die Unterstützung für dunkle Themen für die Präsentation des Portfolios bietet.

Offen