Componente de visualización de precios
Un componente de visualización de precios de diseño minimalista / plano para uso en el tablero, con diseño receptivo y soporte para modo oscuro.
Código 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>Componentes relacionados
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.
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
Un componente de visualización de precios lúdico y alegre con elementos redondeados y una combinación de colores análoga, adecuado para que un portafolio muestre trabajos o productos. Es totalmente sensible y es compatible con el modo oscuro.