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 simple y minimalista que usa Tailwind CSS, con combinación de colores de tonos tierra, propósito de redes sociales y soporte para temas oscuros. Es responsivo e incluye elementos de muestra. Este componente está diseñado para una visualización básica con elementos mínimos y sin JavaScript.
Componente de carrito de compras
Componente de carrito de compras Skeuomorphic con esquema de color pastel, responsivo y soporte de modo oscuro.
Componente de carrito de compras
Componente de carrito de compras con diseño brutalista, efectos responsivos y soporte para temas oscuros.