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

Produktkartenkomponente mit Benutzeroberfläche im Dunkelmodus

Produktkartenkomponente mit Dark-Mode-Benutzeroberfläche und responsiven Effekten mit Tailwind CSS.

Offen

ArtDeco_ProductCards_Music

Einfache, ansprechende Produktkartenkomponente mit Art-Déco-Ästhetik, mit geometrischen Mustern und einem Sonnenuntergangs-/warmen Farbschema, geeignet für Musik- und Audioplattformen. Enthält Unterstützung für den Dunkelmodus.

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