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 complejos de estilo retro-vintage para carteras, con un esquema de color triádico, capacidad de respuesta y compatibilidad con el modo oscuro mediante Tailwind CSS. No se incluye JavaScript.
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.
Componente de visualización de precios
Un componente de visualización de precios receptivo con estética retro / vintage y colores vibrantes, adecuado para interfaces de redes sociales, con soporte para modo oscuro.