Composant de panier d’achat
Un composant de panier d’achat simple et réactif avec prise en charge du thème sombre, stylisé à l’aide de Tailwind CSS suivant les principes de conception matérielle avec une palette de couleurs en niveaux de gris. Utilise picsum.photos pour les images de produits.
HTML Code
<div class="container mx-auto p-4">
<div class="dark:bg-gray-800 bg-white shadow-md rounded-lg p-6">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Your Shopping Cart</h1>
<!-- Cart Item 1 -->
<div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
<img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product1/200/200" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h2>
<p class="text-gray-600 dark:text-gray-400">Category: Electronics</p>
<p class="text-gray-800 dark:text-white font-bold">$299.99</p>
</div>
<div class="text-gray-600 dark:text-gray-400">
Quantity: 1
</div>
</div>
<!-- Cart Item 2 -->
<div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
<img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product2/200/200" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-400">Category: Books</p>
<p class="text-gray-800 dark:text-white font-bold">$19.50</p>
</div>
<div class="text-gray-600 dark:text-gray-400">
Quantity: 2
</div>
</div>
<!-- Cart Summary -->
<div class="flex justify-between items-center mt-6">
<span class="text-xl font-semibold text-gray-800 dark:text-white">Total:</span>
<span class="text-xl font-bold text-gray-800 dark:text-white">$339.99</span>
</div>
<div class="mt-6 flex justify-end">
<button class="px-6 py-3 bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">
Checkout
</button>
</div>
</div>
</div>Composants associés
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.
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.
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.