CCHub Logo CCHub Tailwind Collection
Komponenten Preisauszeichnung Komponente "Preisanzeige"

Komponente "Preisanzeige"

Preisanzeigekomponente mit Retro/Vintage-Ästhetik, responsivem Design und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="sm:flex sm:items-center px-6 py-4">
        <div class="text-center sm:text-left sm:flex-grow">
            <div class="mb-4">
                <p class="text-xl font-bold text-gray-900 dark:text-white">Product Name</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Product Description</p>
            </div>
            <div class="flex justify-center sm:justify-start items-baseline">
                <span class="text-2xl font-bold text-gray-900 dark:text-white">$</span>
                <span class="text-4xl font-bold text-gray-900 dark:text-white">19.99</span>
                <span class="text-sm text-gray-600 dark:text-gray-400">/month</span>
            </div>
            <div class="mt-4">
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Buy Now
                </button>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Preisanzeige"

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

Offen

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 einfache, reaktionsschnelle Preisanzeigekomponente für Immobilienangebote mit Erdtönen und Unterstützung für den Dunkelmodus.

Offen