CCHub Logo CCHub Tailwind Collection
Komponenten Produktkarten Komponente "Produktkarten"

Komponente "Produktkarten"

Eine reaktionsschnelle Produktkartenkomponente mit Mikrointeraktionen, die ein Graustufen-Farbschema verwendet und den Dunkelmodus unterstützt. Ideal für Blog- oder Content-Konsumzwecke.

Vorschau

HTML-Code 

<div class="flex flex-wrap justify-center p-4">
    <div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">
        <div class="bg-white dark:bg-gray-800 p-4">
            <h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar">
                <div class="text-gray-800 dark:text-white">
                    <p class="text-sm font-medium">Author Name</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
                </div>
            </div>
        </div>
    </div>
    <div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">
        <div class="bg-white dark:bg-gray-800 p-4">
            <h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
                <div class="text-gray-800 dark:text-white">
                    <p class="text-sm font-medium">Author Name</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
                </div>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

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.

Offen

Skeuomorphe Produktkarte

Eine Skeuomorphic Product Card-Komponente für ein Dashboard, formatiert mit Graustufen, mittlerer Komplexität, reaktionsschnell mit Dunkelmodus.

Offen

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