CCHub Logo CCHub Tailwind Collection
Komponenten Preisauszeichnung Komponente "Preisanzeige"

Komponente "Preisanzeige"

Eine komplexe Preisanzeigekomponente, die im skeuomorphen Stil entworfen wurde, reale Elemente nachahmt, geeignet für Blogs und den Konsum von Inhalten mit einem triadischen Farbschema und responsivem Design mit Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Price Display</h2>
    <div class="flex items-center justify-between mb-4">
        <img src="https://picsum.photos/80" alt="Product Image" class="w-20 h-20 rounded-full shadow-md border border-gray-300 dark:border-gray-600">
        <div class="flex-shrink-0">
            <span class="text-lg font-semibold text-gray-800 dark:text-white">$199.99</span>
            <span class="text-sm text-gray-500 dark:text-gray-300">/ each</span>
        </div>
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-6">This product is designed to give you the best experience and thus comes with an assurance of quality and excellent service.</p>
    <div class="flex items-center justify-between border-t border-gray-200 dark:border-gray-600 pt-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded shadow-md">Buy Now</button>
        <button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded shadow-md">Add to Cart</button>
    </div>
    <footer class="mt-4 text-gray-500 dark:text-gray-400 text-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mx-auto mb-1">
        <span class="text-sm">Posted by John Doe</span>
    </footer>
</div>

Verwandte Komponenten

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.

Offen

Komponente "Preisanzeige"

Preisanzeigekomponente im Neumorphism-Stil mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Cyberpunk-Komponente für die Preisanzeige

Eine reaktionsschnelle Preisanzeigekomponente für Beratung/Dienstleistungen mit einer Cyberpunk-, futuristischen Neon-Ästhetik. Verfügt über dunkle Hintergründe, helle analoge Akzentfarben und unterstützt den Dunkelmodus.

Offen