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 in stile retrò/vintage con combinazione di colori in scala di grigi, complessità moderata e design reattivo con supporto per temi scuri. Progettato per siti web aziendali/aziendali che utilizzano Tailwind CSS. Niente JavaScript, solo HTML con le classi Tailwind. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar.
OrganicoNaturaSportShoppingCarrelloComponente
Un componente del carrello della spesa semplice e reattivo con un design organico/ispirato alla natura, combinazione di colori triadico, adatto per applicazioni sportive e di fitness, con supporto per la modalità scura.
Componente del carrello della spesa
Un componente del carrello della spesa con design Skeuomorphism, effetti reattivi e supporto per temi scuri.