Componente de carrito de compras
Un componente de carrito de compras de estilo retro vintage con diseño receptivo y soporte para modo oscuro, que utiliza Tailwind CSS y presenta imágenes y avatares de marcador de posición.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto mt-10">
<h2 class="text-2xl font-bold text-center text-black dark:text-white">Shopping Cart</h2>
<ul class="mt-4">
<li class="flex items-center justify-between py-2 border-b border-gray-300">
<img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<input type="number" value="1" class="border rounded-md w-16 text-center" />
<button class="ml-2 text-red-500 font-bold">Remove</button>
</li>
<li class="flex items-center justify-between py-2 border-b border-gray-300">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">$49.99</p>
</div>
<input type="number" value="1" class="border rounded-md w-16 text-center" />
<button class="ml-2 text-red-500 font-bold">Remove</button>
</li>
<li class="flex items-center justify-between py-2 border-b border-gray-300">
<img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="rounded-md">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<input type="number" value="1" class="border rounded-md w-16 text-center" />
<button class="ml-2 text-red-500 font-bold">Remove</button>
</li>
</ul>
<div class="mt-4 flex justify-between">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total:</p>
<p class="text-lg font-bold text-gray-800 dark:text-gray-200">$99.97</p>
</div>
<button class="mt-6 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md transition duration-300 ease-in-out">Checkout</button>
</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 de carrito de compras receptivo diseñado en estilo Neumorphism usando Tailwind CSS, adecuado para interfaces de redes sociales con soporte de temas oscuros.
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.