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
Componente di visualizzazione dei prezzi con design reattivo, supporto per la modalità oscura e combinazione di colori vivaci.
Componente di visualizzazione del prezzo
Un componente di visualizzazione del prezzo minimo con supporto per la modalità reattiva e scura
Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi ispirato al 3D con una combinazione di colori monocromatica, progettato per le interfacce dei social media. Si tratta di un componente complesso e reattivo con supporto per la modalità oscura, costruito utilizzando Tailwind CSS. Non è incluso alcun JavaScript.