Carrito de compras neumórfico
Un componente de carro de la compra neumórfico que utiliza un esquema de color triádico. Tiene una complejidad moderada, diseñado para sitios web comerciales / corporativos. El componente es responsivo e incluye soporte para el modo oscuro usando el prefijo dark: de Tailwind. Incluye marcadores de posición para artículos con cantidad y precio, un subtotal y un botón de pago. Utiliza picsum.photos para las imágenes de productos.
Código HTML
<div class="container mx-auto p-4 dark:bg-gray-800 dark:text-white">
<div class="neumorphic-card p-6 rounded-xl shadow-xl dark:shadow-2xl">
<h2 class="text-2xl font-semibold mb-6 text-center dark:text-white">Shopping Cart</h2>
<div class="space-y-4">
<!-- Cart Item 1 -->
<div class="neumorphic-item p-4 rounded-lg shadow-md flex items-center dark:shadow-lg">
<img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md mr-4 shadow-inner dark:shadow-sm">
<div class="flex-grow">
<h3 class="text-lg font-medium dark:text-white">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
<p class="text-lg font-semibold text-blue-600 dark:text-blue-400">$49.98</p>
</div>
<button class="ml-4 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Cart Item 2 -->
<div class="neumorphic-item p-4 rounded-lg shadow-md flex items-center dark:shadow-lg">
<img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md mr-4 shadow-inner dark:shadow-sm">
<div class="flex-grow">
<h3 class="text-lg font-medium dark:text-white">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
<p class="text-lg font-semibold text-green-600 dark:text-green-400">$24.50</p>
</div>
<button class="ml-4 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
</div>
<div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex justify-between items-center">
<span class="text-xl font-semibold dark:text-white">Subtotal:</span>
<span class="text-xl font-bold text-purple-600 dark:text-purple-400">$74.48</span>
</div>
</div>
<div class="mt-6">
<button class="w-full py-3 rounded-lg bg-blue-600 text-white text-lg font-semibold shadow-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-200 ease-in-out dark:shadow-xl">Proceed to Checkout</button>
</div>
</div>
</div>
<style>
.neumorphic-card {
background: #e0e0e0;
box-shadow: 9px 9px 16px #a3a3a3, -9px -9px 16px #ffffff;
}
.dark .neumorphic-card {
background: #374151;
box-shadow: 9px 9px 16px #252c38, -9px -9px 16px #49566a;
}
.neumorphic-item {
background: #e0e0e0;
box-shadow: inset 5px 5px 10px #a3a3a3, inset -5px -5px 10px #ffffff;
}
.dark .neumorphic-item {
background: #374151;
box-shadow: inset 5px 5px 10px #252c38, inset -5px -5px 10px #49566a;
}
</style>Componentes relacionados
Componente de carrito de compras
Un componente de carrito de compras receptivo diseñado con un estilo brutalista, con alto contraste y diseños inusuales. Es compatible con el tema oscuro con Tailwind CSS.
Componente de carrito de compras
Un componente de carrito de compras de temática retro/vintage con combinación de colores monocromática, complejidad moderada, diseño receptivo y compatibilidad con modo oscuro. Adecuado para sitios web comerciales/corporativos.
Componente de carrito de compras 3D
Un componente de carrito de compras visualmente impactante con elementos de diseño 3D que crean profundidad y compromiso. Utiliza un esquema de color triádico (azul primario, rojo vivo y amarillo ámbar) para el interés visual. Esta compleja interfaz incluye listados de productos con imágenes, controles de cantidad, resúmenes de precios y efectos de desplazamiento que simulan el movimiento en 3D. Totalmente responsivo con soporte para temas oscuros. El componente está diseñado para un entorno de contenido/blog en el que los lectores pueden comprar productos recomendados mientras consumen contenido.