Composant de panier d’achat
Un composant de panier d’achat complexe et réactif avec des micro-interactions et des couleurs analogues, pour les médias sociaux, avec prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="container mx-auto p-4 lg:p-8 dark:bg-gray-900">
<h1 class="text-2xl font-bold mb-6 dark:text-white">Shopping Cart</h1>
<div class="flex flex-col lg:flex-row gap-6">
<!-- Cart Items -->
<div class="lg:w-2/3">
<!-- Item 1 -->
<div class="flex items-center border-b pb-4 mb-4 animate-fadeIn dark:border-gray-700">
<img src="https://picsum.photos/seed/item1/100" alt="Product Image" class="w-16 h-16 object-cover rounded mr-4">
<div class="flex-grow">
<h2 class="text-lg font-semibold dark:text-white">Awesome Product Name</h2>
<p class="text-gray-600 dark:text-gray-400">Color: Blue, Size: M</p>
<div class="flex items-center mt-2">
<span class="text-lg font-bold text-blue-600 dark:text-blue-400">$49.99</span>
<span class="text-sm text-gray-500 line-through ml-2 dark:text-gray-500">$59.99</span>
</div>
</div>
<div class="flex items-center">
<input type="number" value="1" min="1" class="w-16 px-2 py-1 border rounded text-center dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<button class="ml-4 text-red-600 hover:text-red-800 transition duration-300 ease-in-out transform hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</div>
<!-- Item 2 -->
<div class="flex items-center border-b pb-4 mb-4 animate-fadeIn dark:border-gray-700">
<img src="https://picsum.photos/seed/item2/100" alt="Product Image" class="w-16 h-16 object-cover rounded mr-4">
<div class="flex-grow">
<h2 class="text-lg font-semibold dark:text-white">Another Great Product</h2>
<p class="text-gray-600 dark:text-gray-400">Color: Red, Size: L</p>
<div class="flex items-center mt-2">
<span class="text-lg font-bold text-green-600 dark:text-green-400">$29.99</span>
</div>
</div>
<div class="flex items-center">
<input type="number" value="2" min="1" class="w-16 px-2 py-1 border rounded text-center dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<button class="ml-4 text-red-600 hover:text-red-800 transition duration-300 ease-in-out transform hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</div>
</div>
<!-- Order Summary -->
<div class="lg:w-1/3 bg-gray-100 p-6 rounded-lg dark:bg-gray-800 animate-slideInRight">
<h2 class="text-xl font-bold mb-4 dark:text-white">Order Summary</h2>
<div class="flex justify-between mb-2">
<span class="dark:text-gray-300">Subtotal:</span>
<span class="font-semibold dark:text-white">$109.97</span>
</div>
<div class="flex justify-between mb-2">
<span class="dark:text-gray-300">Shipping:</span>
<span class="font-semibold dark:text-white">$5.00</span>
</div>
<div class="flex justify-between mb-4">
<span class="dark:text-gray-300">Tax:</span>
<span class="font-semibold dark:text-white">$8.80</span>
</div>
<div class="flex justify-between font-bold text-lg mb-6 dark:text-white">
<span>Total:</span>
<span>$123.77</span>
</div>
<button class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105">
Checkout
</button>
</div>
</div>
</div>
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.animate-fadeIn {
animation: fadeIn 0.5s ease-out;
}
.animate-slideInRight {
animation: slideInRight 0.5s ease-out;
}
</style>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 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.
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.