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.
Código HTML
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h1>
<div class="space-y-4">
<!-- Cart Item 1 -->
<div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
<img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h2>
<p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
<p class="text-gray-800 dark:text-white font-bold">$19.99</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Cart Item 2 -->
<div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
<img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
<p class="text-gray-800 dark:text-white font-bold">$39.98</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Cart Item 3 -->
<div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
<img src="https://picsum.photos/seed/item3/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 3</h2>
<p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
<p class="text-gray-800 dark:text-white font-bold">$9.50</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
</div>
<!-- Cart Summary -->
<div class="mt-6 flex justify-between items-center">
<span class="text-xl font-bold text-gray-800 dark:text-white">Total:</span>
<span class="text-xl font-bold text-gray-800 dark:text-white">$69.47</span>
</div>
<button class="mt-6 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded dark:bg-green-700 dark:hover:bg-green-800">
Checkout
</button>
</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.
Componente de carrito de compras
Un componente de carrito de compras con diseño Skeuomorphism, efectos responsivos y compatibilidad con temas oscuros.
Componente de carrito de compras
Un componente de carrito de compras receptivo diseñado con un estilo brutalista, con alto contraste y diseños inusuales. Es compatible con el tema oscuro con Tailwind CSS.