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.
Codice HTML
<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>Componenti correlati
Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi complesso e reattivo per una dashboard, con supporto per il tema scuro, che utilizza Tailwind CSS in un design piatto minimalista in scala di grigi.
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.
Componente di visualizzazione del prezzo
Un componente di visualizzazione dei prezzi giocoso e allegro con elementi arrotondati e una combinazione di colori analoga, adatto a un portfolio per mostrare lavori o prodotti. È completamente reattivo e supporta la modalità oscura.