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.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10 p-5">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">Shopping Cart</h2>
<div class="mb-4">
<div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
<img src="https://picsum.photos/50?random=1" alt="Product Image" class="w-16 h-16 rounded shadow-md">
<div class="flex-1 ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
</div>
<div class="mb-4">
<div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
<img src="https://picsum.photos/50?random=2" alt="Product Image" class="w-16 h-16 rounded shadow-md">
<div class="flex-1 ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
</div>
<div class="flex justify-between font-bold text-lg mt-5">
<span class="text-gray-800 dark:text-white">Total:</span>
<span class="text-gray-800 dark:text-white">$49.98</span>
</div>
<button class="mt-5 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full">Checkout</button>
</div>Componentes relacionados
Componente de carrito de compras
Un componente de carrito de compras optimizado para interfaces de redes sociales, con microinteracciones, colores vibrantes y un diseño simple. Incluye diseño responsivo y soporte para modo oscuro.
Componente de carrito de compras
Un componente simple de carrito de compras en modo oscuro con un diseño receptivo, con listados de productos, cantidades y un total. Utiliza un esquema de color triádico con un fondo oscuro. Está diseñado para el consumo de contenidos.
Componente de carrito de compras
Componente de carrito de compras con diseño brutalista, efectos responsivos y soporte para temas oscuros.