Componente de carrito de compras
Un componente de carrito de compras receptivo diseñado en estilo Neumorphism usando Tailwind CSS, adecuado para interfaces de redes sociales con soporte de temas oscuros.
Código HTML
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Shopping Cart</h2>
<div class="space-y-4">
<!-- Cart Item 1 -->
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
<img src="https://picsum.photos/80?random=1" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
<div class="flex-1 mx-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
</div>
<!-- Cart Item 2 -->
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
<img src="https://picsum.photos/80?random=2" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
<div class="flex-1 mx-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
</div>
<!-- Cart Item 3 -->
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
<img src="https://picsum.photos/80?random=3" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
<div class="flex-1 mx-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-400">$39.99</p>
</div>
<button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
</div>
</div>
<div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Total: $89.97</h3>
<button class="mt-4 w-full bg-blue-500 dark:bg-blue-700 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Checkout</button>
</div>
</div>
</div>Componentes relacionados
Componente de carrito de compras
Un componente de carrito de compras simple y receptivo con soporte para temas oscuros, diseñado con Tailwind CSS siguiendo los principios de Material Design con un esquema de color en escala de grises. Utiliza picsum.photos para las imágenes de productos.
Memphis_Industrial_Shopping_Cart_Component
Un componente de carrito de compras simple y receptivo con una influencia de Memphis Design adaptado a contextos industriales/de fabricación, con una paleta monocromática con un solo color de acento brillante y soporte para modo oscuro.
Componente de carrito de compras
Un componente de carrito de compras simple y receptivo con diseño retro / vintage, combinación de colores complementaria y soporte para modo oscuro, construido con Tailwind CSS.