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 complesso e reattivo con microinterazioni e colori analoghi, per i social media, con supporto della modalità oscura utilizzando Tailwind CSS.
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.
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.