Komponente "Preisanzeige"
Eine minimalistische/flache Design-Preisanzeigekomponente für die Verwendung im Dashboard, mit responsivem Design und Unterstützung für den Dunkelmodus.
HTML-Code
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-xs mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Price Overview</h2>
<div class="flex items-center justify-between mb-4">
<span class="text-lg font-semibold text-gray-700 dark:text-gray-300">Current Price</span>
<span class="text-2xl font-extrabold text-blue-500 dark:text-blue-300">$99.99</span>
</div>
<div class="flex items-center justify-between">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-full">
<div>
<span class="text-sm text-gray-600 dark:text-gray-400">Last updated: 2 hours ago</span>
</div>
</div>
<button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-600 dark:hover:bg-blue-500">View Details</button>
</div>Verwandte Komponenten
Komponente "Preisanzeige"
Eine einfache, reaktionsschnelle Preisanzeigekomponente für Immobilienangebote mit Erdtönen und 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 reaktionsschnelle Preisanzeigekomponente für ein Dashboard mit ansprechenden Mikrointeraktionen und einem triadischen Farbschema mit Unterstützung für den Dunkelmodus.