Componente de carrito de compras
Un componente de carrito de compras receptivo con un diseño esqueuomórfico, con soporte para temas oscuros e imágenes de marcadores de posición aleatorios.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 max-w-md mx-auto">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Shopping Cart</h2>
<div class="space-y-4">
<div class="flex items-center justify-between p-4 border rounded-lg shadow-md bg-gray-100 dark:bg-gray-700">
<img src="https://picsum.photos/80" alt="Product" class="w-16 h-16 rounded-md">
<div class="flex-1 ml-4">
<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">$29.99</p>
</div>
<input type="number" value="1" min="1" class="w-12 border rounded-md text-center bg-gray-200 dark:bg-gray-600">
</div>
<div class="flex items-center justify-between p-4 border rounded-lg shadow-md bg-gray-100 dark:bg-gray-700">
<img src="https://picsum.photos/80" alt="Product" class="w-16 h-16 rounded-md">
<div class="flex-1 ml-4">
<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">$49.99</p>
</div>
<input type="number" value="1" min="1" class="w-12 border rounded-md text-center bg-gray-200 dark:bg-gray-600">
</div>
</div>
<div class="mt-5 flex justify-between items-center border-t pt-4">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Total</h2>
<p class="text-lg font-bold text-gray-800 dark:text-gray-200">$79.98</p>
</div>
<button class="mt-5 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded transition duration-200">Checkout</button>
</div>Componentes relacionados
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
Un componente de carrito de compras de estilo retro / vintage con esquema de color en escala de grises, complejidad moderada y diseño receptivo con soporte para temas oscuros. Diseñado para sitios web empresariales/corporativos que utilizan Tailwind CSS. Sin JavaScript, solo HTML con clases Tailwind. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.
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.