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 de panier d’achat réactif avec un design skeuomorphe, avec la prise en charge du thème sombre et des images d’espace réservé aléatoires.
Composant de panier d’achat
Un composant de panier d’achat simple et réactif avec un design Neumorphism et une palette de couleurs complémentaire pour la prise en charge du thème sombre.
Composant de panier d’achat
Un composant de panier d’achat simple et réactif avec un design rétro/vintage, une palette de couleurs complémentaire et une prise en charge du mode sombre, conçu à l’aide de Tailwind CSS.