Componente del carrello della spesa
Un componente del carrello della spesa complesso e reattivo con microinterazioni e colori analoghi, per i social media, con supporto della modalità oscura utilizzando Tailwind CSS.
Codice HTML
<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>Componenti correlati
Componente del carrello della spesa
Un componente del carrello della spesa semplice e reattivo con supporto per il tema scuro, con uno stile che utilizza Tailwind CSS seguendo i principi del Material Design con una combinazione di colori in scala di grigi. Utilizza picsum.photos per le immagini dei prodotti.
Componente del carrello della spesa
Componente del carrello con stile Microinterazioni, effetti reattivi e supporto per temi scuri.
Componente del carrello della spesa
Un componente del carrello della spesa semplice e minimalista che utilizza Tailwind CSS, con combinazione di colori dei toni della terra, scopo dei social media e supporto per temi scuri. È reattivo e include elementi di esempio. Questo componente è progettato per la visualizzazione di base con elementi minimi e senza JavaScript.