Komponente "Preisanzeige"
Eine Preisanzeigekomponente im 3D-Stil, die den Dunkelmodus und reaktionsschnelle Effekte unterstützt und Produktpreisdetails anzeigt.
HTML-Code
<div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/200" alt="Product Image" class="w-full h-48 object-cover rounded-md shadow-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Name</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 mb-4">A brief description of the product goes here, highlighting features and benefits.</p>
<div class="flex flex-row items-baseline mb-4">
<span class="text-2xl font-bold text-gray-800 dark:text-white">$49.99</span>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-2">/ month</span>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-sm text-gray-600 dark:text-gray-400">5 reviews</span>
</div>
<button class="mt-4 py-2 px-4 bg-blue-500 text-white rounded-md shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-200">Buy Now</button>
</div>
</div>
Verwandte Komponenten
Komponente "Preisanzeige"
Eine reaktionsschnelle Preisanzeigekomponente mit Neumorphism-Stil und komplementärem Farbschema, die für Blog-Inhalte mit Unterstützung des Dunkelmodus entwickelt wurde.
Komponente "Preisanzeige"
Eine reaktionsschnelle Preisanzeigekomponente für ein Dashboard mit ansprechenden Mikrointeraktionen und einem triadischen Farbschema mit Unterstützung für den Dunkelmodus.
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.