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.
Codice HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-sm w-full">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Current Price</h2>
<span class="text-sm text-gray-500 dark:text-gray-400">Updated: Just Now</span>
</div>
<div class="flex items-center mb-6">
<div class="text-4xl font-bold text-gray-900 dark:text-white">$1,234.56</div>
<div class="flex items-center ml-4">
<svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
<span class="text-lg font-semibold text-green-500">+1.23%</span>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 pt-4">
<div class="text-sm text-gray-600 dark:text-gray-300 mb-2">Historical Data:</div>
<div class="flex space-x-4">
<div class="text-center">
<div class="text-md font-semibold text-gray-800 dark:text-white">High</div>
<div class="text-sm text-gray-600 dark:text-gray-300">$1,250.00</div>
</div>
<div class="text-center">
<div class="text-md font-semibold text-gray-800 dark:text-white">Low</div>
<div class="text-sm text-gray-600 dark:text-gray-300">$1,200.00</div>
</div>
<div class="text-center">
<div class="text-md font-semibold text-gray-800 dark:text-white">Volume</div>
<div class="text-sm text-gray-600 dark:text-gray-300">10k</div>
</div>
</div>
</div>
</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 a tema retrò/vintage per l'e-commerce, caratterizzato da una combinazione di colori triadica. Si tratta di un design complesso e reattivo con supporto per il tema scuro, costruito con Tailwind CSS.
Componente di visualizzazione del prezzo 22
Un componente minimalista per la visualizzazione dei prezzi che mostra l'immagine, il nome, il prezzo e un pulsante da aggiungere al carrello di un prodotto. Progettato con reattività e supporto per temi scuri utilizzando Tailwind CSS.