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 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.
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 simple de panier d’achat en mode sombre avec un design réactif, avec des listes de produits, des quantités et un total. Il utilise une palette de couleurs triadique avec un fond sombre. Il est conçu pour la consommation de contenu.