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 einfache, saubere Preisanzeigekomponente mit einer Monospace-/Entwickler-Ästhetik und einer Retro-/Vintage-Farbpalette, die für Wetter-/Klimadaten entwickelt wurde.

Offen

Komponente "Preisanzeige"

Preisanzeigekomponente mit responsivem Design, Unterstützung des Dunkelmodus und lebendigem Farbschema.

Offen

Komponente "Preisanzeige"

Eine verspielte und fröhliche Preisanzeigekomponente mit abgerundeten Elementen und einer analogen Farbgebung, die sich für ein Portfolio eignet, um Arbeiten oder Produkte zu präsentieren. Es reagiert vollständig und unterstützt den Dunkelmodus.

Offen