Componente de carrito de compras
Un componente de carrito de compras optimizado para interfaces de redes sociales, con microinteracciones, colores vibrantes y un diseño simple. Incluye diseño responsivo y soporte para modo oscuro.
Código HTML
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg">
<h2 class="text-xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Shopping Cart</h2>
<div class="space-y-4">
<!-- Cart Item -->
<div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img src="https://picsum.photos/seed/item1/50/50" alt="Product Image" class="rounded mr-4">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 1</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">$19.99</p>
</div>
</div>
<div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
x1
</div>
</div>
<!-- Cart Item -->
<div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img src="https://picsum.photos/seed/item2/50/50" alt="Product Image" class="rounded mr-4">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 2</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">$29.50</p>
</div>
</div>
<div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
x2
</div>
</div>
</div>
<div class="flex justify-between items-center mt-6">
<p class="text-lg font-bold text-gray-800 dark:text-gray-200">Total:</p>
<p class="text-lg font-bold text-indigo-600 dark:text-indigo-400">$78.98</p>
</div>
<button class="mt-6 w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 rounded-md transition duration-300">
Checkout
</button>
</div>Componentes relacionados
Componente de carrito de compras
Un componente de carrito de compras simple y minimalista que usa Tailwind CSS, con combinación de colores de tonos tierra, propósito de redes sociales y soporte para temas oscuros. Es responsivo e incluye elementos de muestra. Este componente está diseñado para una visualización básica con elementos mínimos y sin JavaScript.
Componente de carrito de compras
Un componente de carrito de compras complejo y receptivo con microinteracciones y colores análogos, para redes sociales, con soporte de modo oscuro usando Tailwind CSS.
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.