Componente del carrello della spesa
Un componente del carrello della spesa progettato in 3D con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class='bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md mx-auto transform transition-all duration-300 hover:scale-105'>
<h2 class='text-xl font-semibold text-gray-800 dark:text-white'>Shopping Cart</h2>
<ul class='mt-4 space-y-4'>
<li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
<img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
<div class='flex-grow pl-4'>
<h3 class='text-gray-800 dark:text-white font-medium'>Product Name</h3>
<p class='text-gray-600 dark:text-gray-300'>$19.99</p>
</div>
<button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
</li>
<li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
<img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
<div class='flex-grow pl-4'>
<h3 class='text-gray-800 dark:text-white font-medium'>Another Product</h3>
<p class='text-gray-600 dark:text-gray-300'>$29.99</p>
</div>
<button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
</li>
</ul>
<div class='mt-6 flex justify-between items-center'>
<span class='text-gray-800 dark:text-white text-lg'>Total:</span>
<span class='text-gray-800 dark:text-white text-lg font-semibold'>$49.98</span>
</div>
<button class='mt-5 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition'>Proceed to Checkout</button>
</div>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
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 della spesa
Componente del carrello della spesa con Material Design, combinazione di colori monocromatici e complessità moderata per l'e-commerce. Design reattivo con supporto per temi scuri utilizzando Tailwind CSS.