Componente del carrello della spesa
Un semplice componente del carrello della spesa reattivo con design del neumorfismo e combinazione di colori complementari per il supporto del tema scuro.
Codice HTML
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg"> <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Shopping Cart</h2> <ul class="space-y-4"> <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600"> <img src="https://picsum.photos/50/50" alt="Product Image" class="mr-4 rounded"> <div class="flex-1"> <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3> <p class="text-gray-600 dark:text-gray-400">$19.99</p> </div> <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button> </li> <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600"> <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="mr-4 rounded"> <div class="flex-1"> <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3> <p class="text-gray-600 dark:text-gray-400">$29.99</p> </div> <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button> </li> </ul> <div class="mt-6"> <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Total: <span class="text-blue-500">$49.98</span></h4> </div> <button class="mt-4 bg-green-500 text-white rounded-full px-4 py-2 shadow transition duration-300 hover:bg-green-600">Checkout</button> <footer class="mt-6 text-center text-gray-600 dark:text-gray-400"> <p>Created for Portfolio</p> </footer> </div>Componenti correlati
Componente del carrello della spesa - Ispirato alla natura
Un componente complesso del carrello della spesa ispirato alla natura per applicazioni sportive/fitness, caratterizzato da linee fluide, una combinazione di colori complementari, reattività e supporto per la modalità scura.
Componente RetroShoppingcart
Un componente del carrello della spesa reattivo con un'estetica retrò/vintage, combinazione di colori triadici e supporto per la modalità scura, adatto per un portfolio.
Carrello della spesa neumorfico
Un componente del carrello della spesa neumorfico che utilizza una combinazione di colori triadica. Ha una complessità moderata, progettato per siti Web aziendali/aziendali. Il componente è reattivo e include il supporto per la modalità oscura utilizzando il prefisso dark: di Tailwind. Include segnaposto per gli articoli con quantità e prezzo, un subtotale e un pulsante di pagamento. Utilizza picsum.photos per le immagini dei prodotti.