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
Componente de carrito de compras con diseño brutalista, efectos responsivos y soporte para temas oscuros.
Componente de carrito de compras
Un componente de carrito de compras receptivo diseñado para una plataforma de comercio electrónico, con un estilo de diseño 3D y una combinación de colores pastel. Está equipado con múltiples elementos interactivos, como listados de productos, cantidades y un botón de pago, compatible con el tema oscuro.
Componente de carrito de compras
Componente de carrito de compras con diseño 3D, tonos tierra y elementos interactivos complejos. Está diseñado para un sitio web de blog/contenido, con diseño responsivo y soporte para temas oscuros, utilizando Tailwind CSS.