Componente del carrello della spesa
Un componente reattivo del carrello della spesa progettato in stile neumorfismo utilizzando Tailwind CSS, adatto per interfacce di social media con supporto per temi scuri.
Codice HTML
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Shopping Cart</h2>
<div class="space-y-4">
<!-- Cart Item 1 -->
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
<img src="https://picsum.photos/80?random=1" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
<div class="flex-1 mx-4">
<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">$19.99</p>
</div>
<button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
</div>
<!-- Cart Item 2 -->
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
<img src="https://picsum.photos/80?random=2" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
<div class="flex-1 mx-4">
<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">$29.99</p>
</div>
<button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
</div>
<!-- Cart Item 3 -->
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
<img src="https://picsum.photos/80?random=3" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
<div class="flex-1 mx-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-400">$39.99</p>
</div>
<button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
</div>
</div>
<div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Total: $89.97</h3>
<button class="mt-4 w-full bg-blue-500 dark:bg-blue-700 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Checkout</button>
</div>
</div>
</div>Componenti correlati
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.
Componente del carrello 3D
Un componente del carrello della spesa di grande impatto visivo con elementi di design 3D che creano profondità e coinvolgimento. Utilizza una combinazione di colori triadica (blu primario, rosso vivido e giallo ambra) per l'interesse visivo. Questa complessa interfaccia include elenchi di prodotti con immagini, controlli della quantità, riepiloghi dei prezzi ed effetti al passaggio del mouse che simulano il movimento 3D. Completamente reattivo con supporto per temi scuri. Il componente è progettato per un ambiente di contenuti/blog in cui i lettori possono acquistare prodotti consigliati mentre consumano contenuti.
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.