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 neumórfico
Un componente de visualización de precios complejo, receptivo y compatible con el modo oscuro con un estilo de diseño Neumorphism y un esquema de color análogo, adecuado para el consumo de blog/contenido. Cuenta con múltiples elementos interactivos como conmutadores y niveles detallados.
Componente de visualización de precios
Componente de visualización de precios con estética retro / vintage, diseño receptivo y soporte de modo oscuro.
Componente de visualización de precios
Un componente de visualización de precios de estilo Neumorphism con un esquema de color complementario (naranja suave y azul claro), complejidad moderada para el comercio electrónico. Cuenta con un diseño responsivo con soporte para temas oscuros. El componente muestra una imagen, un título y un precio del producto con un botón "Agregar al carrito". El modo oscuro utiliza colores complementarios desaturados.