Componente de carrito de compras
Un componente de carrito de compras diseñado con efectos de morfismo de vidrio, que utiliza un esquema de color complementario y está optimizado para el modo oscuro. Perfecto para uso de portafolio, exhibición de trabajos o productos.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-600 p-6 w-full max-w-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white text-center">Shopping Cart</h2>
<div class="mt-4">
<div class="flex items-center justify-between border-b pb-2 mb-2">
<img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md" />
<div class="flex-1 mx-2">
<h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Product Name</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">$29.99</p>
</div>
<span class="text-gray-600 dark:text-gray-200">Quantity: 1</span>
</div>
<div class="flex items-center justify-between border-b pb-2 mb-2">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md" />
<div class="flex-1 mx-2">
<h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Another Product</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">$19.99</p>
</div>
<span class="text-gray-600 dark:text-gray-200">Quantity: 2</span>
</div>
</div>
<div class="flex items-center justify-between border-t pt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Total:</h3>
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$69.97</span>
</div>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Checkout</button>
</div>
</div>Componentes relacionados
Componente de carrito de compras
Un componente de carrito de compras de temática retro/vintage con combinación de colores monocromática, complejidad moderada, diseño receptivo y compatibilidad con modo oscuro. Adecuado para sitios web comerciales/corporativos.
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.
Componente de carrito de compras
Componente de carrito de compras con diseño de materiales, combinación de colores monocromática y complejidad moderada para comercio electrónico. Diseño responsivo con soporte para temas oscuros usando Tailwind CSS.