Componente de carrito de compras
Un componente de carrito de compras con diseño Skeuomorphism, efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl">
<h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Shopping Cart</h1>
<div class="space-y-4">
<!-- Cart Item -->
<div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/80" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Product Name</h2>
<p class="text-gray-600 dark:text-gray-300">Quantity: 1</p>
<p class="text-gray-800 dark:text-white">$19.99</p>
</div>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
</div>
<!-- Cart Item -->
<div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/81" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Another Product</h2>
<p class="text-gray-600 dark:text-gray-300">Quantity: 2</p>
<p class="text-gray-800 dark:text-white">$29.50</p>
</div>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
</div>
</div>
<div class="mt-6 flex justify-end items-center">
<div class="text-xl font-bold text-gray-900 dark:text-white mr-4">Total: $69.00</div>
<button class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg shadow-xl">Checkout</button>
</div>
</div>Componentes relacionados
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.
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.
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.