CCHub Logo CCHub Tailwind Collection
Komponenten Preisauszeichnung Preisanzeige Komponente 22

Preisanzeige Komponente 22

Eine minimalistische Komponente zur Preisanzeige, die das Bild, den Namen, den Preis und eine Schaltfläche eines Produkts präsentiert, die in den Warenkorb gelegt werden kann. Entwickelt mit Reaktionsfähigkeit und Unterstützung für dunkle Themen mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h2>
        <p class="text-xl text-gray-600 dark:text-gray-300">$29.99</p>
        <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300" type="button">Add to Cart</button>
    </div>
</div>

Verwandte Komponenten

Neumorphe Preisanzeigekomponente

Eine komplexe, reaktionsschnelle und mit dem Dunkelmodus kompatible Preisanzeigekomponente mit einem Neumorphism-Designstil und einem analogen Farbschema, geeignet für den Konsum von Blogs/Inhalten. Verfügt über mehrere interaktive Elemente wie Umschalter und detaillierte Ebenen.

Offen

Komponente "Preisanzeige"

Eine Komponente zur Anzeige eines minimalen Preises mit Unterstützung für reaktionsschnelle und dunkle Modi

Offen

Komponente "Preisanzeige"

Eine komplexe Preisanzeigekomponente im Retro-Vintage-Stil für Portfolios mit einem triadischen Farbschema, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus mit Tailwind CSS. Es ist kein JavaScript enthalten.

Offen