Componente de carrito de compras
Un componente de carrito de compras simple y receptivo con diseño de neumorfismo y combinación de colores complementaria para soporte de temas oscuros.
Código HTML
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg"> <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Shopping Cart</h2> <ul class="space-y-4"> <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600"> <img src="https://picsum.photos/50/50" alt="Product Image" class="mr-4 rounded"> <div class="flex-1"> <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3> <p class="text-gray-600 dark:text-gray-400">$19.99</p> </div> <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button> </li> <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600"> <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="mr-4 rounded"> <div class="flex-1"> <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3> <p class="text-gray-600 dark:text-gray-400">$29.99</p> </div> <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button> </li> </ul> <div class="mt-6"> <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Total: <span class="text-blue-500">$49.98</span></h4> </div> <button class="mt-4 bg-green-500 text-white rounded-full px-4 py-2 shadow transition duration-300 hover:bg-green-600">Checkout</button> <footer class="mt-6 text-center text-gray-600 dark:text-gray-400"> <p>Created for Portfolio</p> </footer> </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 simple y receptivo con diseño retro / vintage, combinación de colores complementaria y soporte para modo oscuro, construido con Tailwind CSS.
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.