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.
Código HTML
<div class="container mx-auto p-4">
<div class="dark:bg-gray-800 bg-white shadow-md rounded-lg p-6">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Your Shopping Cart</h1>
<!-- Cart Item 1 -->
<div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
<img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product1/200/200" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h2>
<p class="text-gray-600 dark:text-gray-400">Category: Electronics</p>
<p class="text-gray-800 dark:text-white font-bold">$299.99</p>
</div>
<div class="text-gray-600 dark:text-gray-400">
Quantity: 1
</div>
</div>
<!-- Cart Item 2 -->
<div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
<img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product2/200/200" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-400">Category: Books</p>
<p class="text-gray-800 dark:text-white font-bold">$19.50</p>
</div>
<div class="text-gray-600 dark:text-gray-400">
Quantity: 2
</div>
</div>
<!-- Cart Summary -->
<div class="flex justify-between items-center mt-6">
<span class="text-xl font-semibold text-gray-800 dark:text-white">Total:</span>
<span class="text-xl font-bold text-gray-800 dark:text-white">$339.99</span>
</div>
<div class="mt-6 flex justify-end">
<button class="px-6 py-3 bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">
Checkout
</button>
</div>
</div>
</div>Componentes relacionados
Componente de carrito de compras
Un componente de carrito de compras simple y receptivo que imita el diseño del mundo real con colores vibrantes, adecuado para el comercio electrónico.
Componente de carrito de compras
Un componente de carrito de compras diseñado en 3D con efectos responsivos y soporte de temas oscuros usando Tailwind CSS.
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.