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.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-600 p-6 w-full max-w-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white text-center">Shopping Cart</h2>
<div class="mt-4">
<div class="flex items-center justify-between border-b pb-2 mb-2">
<img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md" />
<div class="flex-1 mx-2">
<h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Product Name</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">$29.99</p>
</div>
<span class="text-gray-600 dark:text-gray-200">Quantity: 1</span>
</div>
<div class="flex items-center justify-between border-b pb-2 mb-2">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md" />
<div class="flex-1 mx-2">
<h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Another Product</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">$19.99</p>
</div>
<span class="text-gray-600 dark:text-gray-200">Quantity: 2</span>
</div>
</div>
<div class="flex items-center justify-between border-t pt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Total:</h3>
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$69.97</span>
</div>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Checkout</button>
</div>
</div>Componenti correlati
Componente del carrello della spesa
Un componente del carrello della spesa reattivo progettato per una piattaforma di e-commerce, caratterizzato da uno stile di design 3D e una combinazione di colori pastello. È dotato di molteplici elementi interattivi come elenchi di prodotti, quantità e un pulsante di pagamento, che supporta il tema scuro.
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.
Componente del carrello della spesa
Un componente del carrello della spesa con design Skeuomorphism, effetti reattivi e supporto per temi scuri.