Componente de visualización de precios
Un componente de visualización de precios complejo y receptivo para un tablero, con soporte para temas oscuros, que utiliza Tailwind CSS en un diseño plano minimalista y en escala de grises.
Código 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>Componentes relacionados
Componente de visualización de precios
Un componente de visualización de precios receptivo para un tablero, con microinteracciones atractivas y un esquema de color triádico, con soporte para el modo oscuro.
Componente de visualización de precios
Un componente de visualización de precios receptivo con estilo de neumorfismo y combinación de colores complementaria, diseñado para contenido de blog con soporte para modo oscuro.
Componente de visualización de precios 22
Un componente de visualización de precios minimalista que muestra la imagen, el nombre, el precio y un botón de un producto para agregar al carrito. Diseñado con capacidad de respuesta y soporte de temas oscuros usando Tailwind CSS.