Componente de carrito de compras
Un componente de carrito de compras de estilo neumórfico para comercio electrónico, con un esquema de color monocromático, elementos interactivos enriquecidos y soporte de temas oscuros mediante Tailwind CSS.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6">
<div class="bg-white dark:bg-gray-800 shadow-inner rounded-xl p-8 max-w-md w-full">
<h2 class="text-gray-800 dark:text-white text-2xl font-semibold mb-6 text-center">Shopping Cart</h2>
<div class="space-y-4">
<div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
<img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
<div class="flex-1 ml-4">
<h3 class="text-gray-800 dark:text-white font-medium">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<div class="flex items-center">
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
<span class="mx-2">1</span>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
</div>
</div>
<div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
<img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
<div class="flex-1 ml-4">
<h3 class="text-gray-800 dark:text-white font-medium">Another Product</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<div class="flex items-center">
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
<span class="mx-2">2</span>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
</div>
</div>
</div>
<div class="mt-6 bg-gray-300 dark:bg-gray-600 rounded-lg p-4 flex justify-between items-center">
<span class="text-gray-800 dark:text-white font-bold">Total:</span>
<span class="text-lg text-gray-800 dark:text-white font-semibold">$69.97</span>
</div>
<div class="mt-4 flex justify-center">
<button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow">
Checkout
</button>
</div>
</div>
</div>Componentes relacionados
Componente de carrito de compras
Un componente de carrito de compras complejo y receptivo con esquema de color en escala de grises, diseñado para un propósito de blog / contenido. Presenta microinteracciones usando Tailwind CSS, con soporte para modo oscuro y sin JavaScript.
Componente de carrito de compras
Un componente de carrito de compras diseñado con skeuomorfismo. Cuenta con elementos digitales que imitan a sus contrapartes del mundo real, soporte receptivo completo y compatibilidad con temas oscuros.
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.