CCHub Logo CCHub Tailwind Collection
Komponenten Produktkarten Komponente "Produktkarten"

Komponente "Produktkarten"

Eine einfache, reaktionsschnelle Produktkartenkomponente mit Mikrointeraktionen, die für Social-Media-Schnittstellen mit Tailwind CSS entwickelt wurde und dunkle Themen und Graustufen-Farbschemata unterstützt.

Vorschau

HTML-Code 

<div class="flex flex-col max-w-xs mx-auto rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white transition-colors duration-300">Product Title</h2>
        <p class="mt-1 text-gray-600 dark:text-gray-300 transition-colors duration-300">Brief description of the product. Engaging text to attract users.</p>
        <div class="flex items-center mt-3">
            <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <span class="ml-2 text-gray-700 dark:text-gray-200 transition-colors duration-300">User Name</span>
        </div>
    </div>
</div>
<div class="mt-4">
    <button class="w-full py-2 px-4 bg-gray-800 text-white rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500 transition-colors duration-300">Add to Cart</button>
</div>

Verwandte Komponenten

Komponente "Produktkarten"

Einfache, reaktionsschnelle Produktkarten mit Aquarell-/Kunstdesign, komplementärem Farbschema und vollständiger Unterstützung des Dunkelmodus, geeignet für ein Portfolio.

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 Mikrointeraktionen in Erdtönen, die Unterstützung für dunkle Themen für die Präsentation des Portfolios bietet.

Offen