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.
Código HTML
<div class="min-h-screen bg-white dark:bg-gray-800 transition-all p-6 rounded-lg shadow-lg transform hover:scale-105 ease-in-out duration-300">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 text-center">Shopping Cart</h2>
<div class="mt-4">
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/80/80" alt="Product Image" class="rounded-lg shadow-lg" />
<div class="flex-1 mx-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-200">Product Title</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">$19.99</p>
</div>
<div class="flex items-center">
<button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 ease-in-out duration-200">+</button>
<span class="mx-2 text-gray-800 dark:text-gray-100">1</span>
<button class="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 ease-in-out duration-200">-</button>
</div>
</div>
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/80/80?random=1" alt="Product Image" class="rounded-lg shadow-lg" />
<div class="flex-1 mx-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-200">Another Product</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">$29.99</p>
</div>
<div class="flex items-center">
<button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 ease-in-out duration-200">+</button>
<span class="mx-2 text-gray-800 dark:text-gray-100">1</span>
<button class="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 ease-in-out duration-200">-</button>
</div>
</div>
</div>
<div class="mt-6 flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
<span class="text-xl font-semibold text-gray-800 dark:text-gray-100">Total</span>
<span class="text-xl font-semibold text-gray-800 dark:text-gray-100">$49.98</span>
</div>
<div class="mt-4">
<button class="w-full bg-green-500 text-white text-lg font-semibold rounded-lg py-2 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 transition duration-200">
Checkout
</button>
</div>
</div>
</div>Componentes relacionados
Carrito de compras retro/vintage
Componente de carrito de compras con estilo retro / vintage, combinación de colores pastel y complejidad simple. Diseño responsivo con soporte para temas oscuros usando Tailwind CSS.
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.
Componente de carrito de compras corporativo retro
Un componente de carrito de compras complejo y receptivo con un estilo de diseño retro / vintage, centrado en la estética de los años 80 / 90 y tonos azules corporativos, adecuado para aplicaciones industriales / de fabricación. Incluye soporte para modo oscuro y elementos interactivos.