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
RetroShoppingcartComponent
Un componente de carrito de compras receptivo con una estética retro / vintage, combinación de colores triádica y soporte para modo oscuro, adecuado para una cartera.
Industrial_Travel_Shopping_Cart
Un componente de carrito de compras complejo y receptivo con una estética de diseño industrial y un esquema de color verde bosque, adecuado para sitios web de reservas de viajes y turismo. Incluye compatibilidad con el modo oscuro, elementos de interfaz enriquecidos y HTML semántico.
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.