Komponenten Preisauszeichnung Komponente "Preisanzeige"

Komponente "Preisanzeige"

Eine reaktionsschnelle Preisanzeigekomponente im Retro-/Vintage-Stil und lebendigen Farben, geeignet für Social-Media-Schnittstellen mit Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code

<div class="max-w-xs mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-5">
        <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
            <div class="ml-3">
                <h2 class="text-lg text-violet-600 dark:text-violet-400 font-bold">John Doe</h2>
                <span class="text-sm text-gray-600 dark:text-gray-300">@johndoe</span>
            </div>
        </div>
        <h3 class="text-2xl text-red-600 dark:text-red-400 font-semibold mb-2">$49.99</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Original Vintage T-Shirt from the 80s.</p>
        <button class="w-full bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-200">Add to Cart</button>
    </div>
</div>

Verwandte Komponenten

Komponente "Preisanzeige"

Eine minimalistische/flache Design-Preisanzeigekomponente für die Verwendung im Dashboard, mit responsivem Design und Unterstützung für den Dunkelmodus.

Offen

Komponente "Preisanzeige"

Eine komplexe, reaktionsschnelle Preisanzeigekomponente für ein Dashboard mit Unterstützung für dunkle Themen, die Tailwind CSS in einem minimalistischen Graustufen-Flat-Design verwendet.

Offen

Komponente "Preisanzeige"

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

Offen