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.
HTML-Code
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h2>
<p class="text-xl text-gray-600 dark:text-gray-300">$29.99</p>
<button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300" type="button">Add to Cart</button>
</div>
</div>Verwandte Komponenten
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.
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.
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.