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

Komponente "Preisanzeige"

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

Offen

Komponente "Preisanzeige"

Eine Preisanzeigekomponente im Neumorphism-Stil mit komplementärem Farbschema (sanftes Orange und Hellblau), moderate Komplexität für den E-Commerce. Es verfügt über ein responsives Design mit Unterstützung für dunkle Themen. Die Komponente zeigt ein Produktbild, einen Titel und einen Preis mit der Schaltfläche "In den Warenkorb" an. Im Dunkelmodus werden entsättigte Komplementärfarben verwendet.

Offen

Komponente "Preisanzeige"

Eine Preisanzeigekomponente im 3D-Stil, die den Dunkelmodus und reaktionsschnelle Effekte unterstützt und Produktpreisdetails anzeigt.

Offen