Composant de panier d’achat
Un composant de panier d’achat optimisé pour les interfaces de médias sociaux, avec des micro-interactions, des couleurs vives et une mise en page simple. Comprend la conception réactive et la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant de panier d’achat
Un composant simple de panier d’achat en mode sombre avec un design réactif, avec des listes de produits, des quantités et un total. Il utilise une palette de couleurs triadique avec un fond sombre. Il est conçu pour la consommation de contenu.
Composant de panier d’achat
Un composant de panier d’achat simple et réactif imitant le design du monde réel avec des couleurs vives, adapté au commerce électronique.
Composant de panier d’achat
Un composant de panier d’achat conçu avec des effets de Glassmorphism, utilisant une palette de couleurs complémentaires et optimisé pour le mode sombre. Parfait pour une utilisation en portefeuille, pour présenter des travaux ou des produits.