Componente de carrito de compras
Un componente de carrito de compras diseñado en 3D con efectos responsivos y soporte de temas oscuros usando Tailwind CSS.
Código HTML
<div class='bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md mx-auto transform transition-all duration-300 hover:scale-105'>
<h2 class='text-xl font-semibold text-gray-800 dark:text-white'>Shopping Cart</h2>
<ul class='mt-4 space-y-4'>
<li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
<img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
<div class='flex-grow pl-4'>
<h3 class='text-gray-800 dark:text-white font-medium'>Product Name</h3>
<p class='text-gray-600 dark:text-gray-300'>$19.99</p>
</div>
<button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
</li>
<li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
<img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
<div class='flex-grow pl-4'>
<h3 class='text-gray-800 dark:text-white font-medium'>Another Product</h3>
<p class='text-gray-600 dark:text-gray-300'>$29.99</p>
</div>
<button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
</li>
</ul>
<div class='mt-6 flex justify-between items-center'>
<span class='text-gray-800 dark:text-white text-lg'>Total:</span>
<span class='text-gray-800 dark:text-white text-lg font-semibold'>$49.98</span>
</div>
<button class='mt-5 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition'>Proceed to Checkout</button>
</div>Componentes relacionados
Componente de carrito de compras
Componente de carrito de compras con estilo de microinteracciones, efectos responsivos y soporte de temas oscuros.
Retro_Vintage_Shopping_Cart_Component
Un componente de carrito de compras receptivo con una estética retro / vintage, utilizando tonos sepia / marrones, adecuado para exhibiciones de productos. Incluye soporte para modo oscuro.
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.