Componente de carrito de compras
Un componente simple de carrito de compras en modo oscuro con un diseño receptivo, con listados de productos, cantidades y un total. Utiliza un esquema de color triádico con un fondo oscuro. Está diseñado para el consumo de contenidos.
Código HTML
<div class="dark:bg-gray-900 dark:text-white min-h-screen p-4">
<h1 class="text-2xl font-bold mb-6 text-center text-blue-400">Your Shopping Cart</h1>
<div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-5">
<!-- Product Item 1 -->
<div class="flex items-center mb-5">
<img src="https://picsum.photos/id/237/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-green-400">Awesome Gadget</h3>
<p class="text-gray-400">Quantity: 1</p>
</div>
<span class="text-lg font-bold text-red-400">$29.99</span>
</div>
<!-- Product Item 2 -->
<div class="flex items-center mb-5">
<img src="https://picsum.photos/id/238/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-green-400">Super Item</h3>
<p class="text-gray-400">Quantity: 2</p>
</div>
<span class="text-lg font-bold text-red-400">$19.50</span>
</div>
<!-- Product Item 3 -->
<div class="flex items-center mb-5">
<img src="https://picsum.photos/id/239/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-green-400">Mega Product</h3>
<p class="text-gray-400">Quantity: 1</p>
</div>
<span class="text-lg font-bold text-red-400">$49.00</span>
</div>
<!-- Total -->
<div class="border-t border-gray-700 pt-4 flex justify-between items-center">
<span class="text-xl font-bold text-blue-400">Total:</span>
<span class="text-xl font-bold text-red-400">$98.49</span>
</div>
<button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-300">
Proceed to Checkout
</button>
</div>
<!-- Responsive adjustments -->
<style>
@media (max-width: 640px) {
.max-w-md {
margin-left: 1rem;
margin-right: 1rem;
}
}
</style>
</div>Componentes relacionados
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 receptivo diseñado en estilo Neumorphism usando Tailwind CSS, adecuado para interfaces de redes sociales con soporte de temas oscuros.
Carrito de compras neumórfico
Un componente de carro de la compra neumórfico que utiliza un esquema de color triádico. Tiene una complejidad moderada, diseñado para sitios web comerciales / corporativos. El componente es responsivo e incluye soporte para el modo oscuro usando el prefijo dark: de Tailwind. Incluye marcadores de posición para artículos con cantidad y precio, un subtotal y un botón de pago. Utiliza picsum.photos para las imágenes de productos.