Componente di visualizzazione del prezzo
Un complesso componente di visualizzazione dei prezzi progettato in stile scheumorfico che imita gli elementi del mondo reale, adatto per blog e consumo di contenuti con una combinazione di colori triadica e un design reattivo con supporto per la modalità oscura.
Codice HTML
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Price Display</h2>
<div class="flex items-center justify-between mb-4">
<img src="https://picsum.photos/80" alt="Product Image" class="w-20 h-20 rounded-full shadow-md border border-gray-300 dark:border-gray-600">
<div class="flex-shrink-0">
<span class="text-lg font-semibold text-gray-800 dark:text-white">$199.99</span>
<span class="text-sm text-gray-500 dark:text-gray-300">/ each</span>
</div>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-6">This product is designed to give you the best experience and thus comes with an assurance of quality and excellent service.</p>
<div class="flex items-center justify-between border-t border-gray-200 dark:border-gray-600 pt-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded shadow-md">Buy Now</button>
<button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded shadow-md">Add to Cart</button>
</div>
<footer class="mt-4 text-gray-500 dark:text-gray-400 text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mx-auto mb-1">
<span class="text-sm">Posted by John Doe</span>
</footer>
</div>Componenti correlati
Componente di visualizzazione del prezzo
Un componente complesso di visualizzazione dei prezzi in stile retrò-vintage per i portafogli, caratterizzato da una combinazione di colori triadica, reattività e supporto per la modalità oscura utilizzando Tailwind CSS. Non è incluso alcun JavaScript.
Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi dal design minimalista/piatto per l'uso sul cruscotto, con design reattivo e supporto per la modalità oscura.
Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi reattivo con stile neumorfismo e combinazione di colori complementari, progettato per i contenuti del blog con supporto per la modalità scura.