Composant de panier d’achat
Un composant de panier d’achat réactif conçu dans le style Neumorphism à l’aide de Tailwind CSS, adapté aux interfaces de médias sociaux avec prise en charge du thème sombre.
HTML Code
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Shopping Cart</h2>
<div class="space-y-4">
<!-- Cart Item 1 -->
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
<img src="https://picsum.photos/80?random=1" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
<div class="flex-1 mx-4">
<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">$19.99</p>
</div>
<button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
</div>
<!-- Cart Item 2 -->
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
<img src="https://picsum.photos/80?random=2" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
<div class="flex-1 mx-4">
<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">$29.99</p>
</div>
<button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
</div>
<!-- Cart Item 3 -->
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
<img src="https://picsum.photos/80?random=3" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
<div class="flex-1 mx-4">
<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">$39.99</p>
</div>
<button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
</div>
</div>
<div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Total: $89.97</h3>
<button class="mt-4 w-full bg-blue-500 dark:bg-blue-700 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Checkout</button>
</div>
</div>
</div>Composants associés
Composant de panier d’achat
Un composant de panier d’achat de style rétro vintage avec un design réactif et une prise en charge du mode sombre, utilisant Tailwind CSS et proposant des images et des avatars de remplacement.
Memphis_Industrial_Shopping_Cart_Component
Un composant de panier d’achat simple et réactif avec une influence Memphis Design adapté aux contextes industriels/manufacturiers, avec une palette monochrome avec une seule couleur d’accent vive et une prise en charge du mode sombre.
Composant de panier d’épicerie - Inspiré de la nature
Un composant de chariot d’épicerie complexe, inspiré de la nature, pour les applications de sport/fitness, avec des lignes fluides, une palette de couleurs complémentaires, une réactivité et une prise en charge du mode sombre.