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.
Código HTML
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h2>
<p class="text-xl text-gray-600 dark:text-gray-300">$29.99</p>
<button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300" type="button">Add to Cart</button>
</div>
</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
Componente de visualización de precios con diseño receptivo, compatibilidad con modo oscuro y combinación de colores vibrantes.
Componente de visualización de precios
Un componente de visualización de precios simple y receptivo para listados de bienes raíces, con colores de tono tierra y soporte para modo oscuro.