Componente del carrello della spesa
Un componente del carrello della spesa ottimizzato per le interfacce dei social media, caratterizzato da microinterazioni, colori vivaci e un layout semplice. Include il design reattivo e il supporto per la modalità scura.
Codice HTML
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg">
<h2 class="text-xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Shopping Cart</h2>
<div class="space-y-4">
<!-- Cart Item -->
<div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img src="https://picsum.photos/seed/item1/50/50" alt="Product Image" class="rounded mr-4">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 1</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">$19.99</p>
</div>
</div>
<div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
x1
</div>
</div>
<!-- Cart Item -->
<div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img src="https://picsum.photos/seed/item2/50/50" alt="Product Image" class="rounded mr-4">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 2</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">$29.50</p>
</div>
</div>
<div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
x2
</div>
</div>
</div>
<div class="flex justify-between items-center mt-6">
<p class="text-lg font-bold text-gray-800 dark:text-gray-200">Total:</p>
<p class="text-lg font-bold text-indigo-600 dark:text-indigo-400">$78.98</p>
</div>
<button class="mt-6 w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 rounded-md transition duration-300">
Checkout
</button>
</div>Componenti correlati
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.
Carrello della spesa retrò/vintage
Componente del carrello della spesa con stile retrò / vintage, combinazione di colori pastello e complessità semplice. Design reattivo con supporto per temi scuri utilizzando Tailwind CSS.
Componente del carrello della spesa
Un componente del carrello della spesa progettato con effetti Glassmorphism, che utilizza una combinazione di colori complementari e ottimizzato per la modalità scura. Perfetto per l'utilizzo del portfolio, la presentazione di lavori o prodotti.