Composant de panier d’achat
Il s’agit d’un composant de panier d’achat simple pour le commerce électronique, avec un aspect Material Design réactif, une palette de couleurs complémentaire et une prise en charge du thème sombre.
HTML Code
<div class="container mx-auto p-4 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Shopping Cart</h2>
<!-- Cart Item 1 -->
<div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
<img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item1/200/200" alt="Product Image">
<div class="flex-grow">
<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">Category</p>
<div class="flex items-center mt-2">
<span class="text-xl font-bold text-gray-800 dark:text-gray-200">$29.99</span>
<span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
</div>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</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-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item2/200/200" alt="Product Image">
<div class="flex-grow">
<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">Category</p>
<div class="flex items-center mt-2">
<span class="text-xl font-bold text-gray-800 dark:text-gray-200">$49.99</span>
<span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
</div>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Cart Summary -->
<div class="flex justify-between items-center mt-6">
<span class="text-xl font-bold text-gray-800 dark:text-gray-200">Total:</span>
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.98</span>
</div>
<button class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md shadow-md dark:bg-blue-500 dark:hover:bg-blue-600">
Proceed to Checkout
</button>
</div>
</div>Composants associés
Composant de panier d’achat
Un composant de panier d’achat simple et minimaliste utilisant Tailwind CSS, avec une palette de couleurs de tons de terre, un objectif de médias sociaux et une prise en charge du thème sombre. Il est réactif et comprend des exemples d’articles. Ce composant est conçu pour un affichage de base avec un minimum d’éléments et sans JavaScript.
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.
Chariot de supermarché Neumorphic
Composant de panier d’achat Neumorphic utilisant une combinaison de couleurs triadique. Il a une complexité modérée, conçu pour les sites Web d’entreprise. Le composant est réactif et inclut la prise en charge du mode sombre à l’aide du préfixe dark : de Tailwind. Comprend des espaces réservés pour les articles avec la quantité et le prix, un sous-total et un bouton de paiement. Utilise picsum.photos pour les images de produits.