Komponente des Einkaufswagens
Eine reaktionsschnelle Warenkorbkomponente, die für eine E-Commerce-Plattform entwickelt wurde und sich durch einen 3D-Designstil und ein Pastellfarbschema auszeichnet. Es ist mit mehreren interaktiven Elementen wie Produktlisten, Mengen und einer Checkout-Schaltfläche ausgestattet, die ein dunkles Thema unterstützen.
HTML-Code
<div class="min-h-screen bg-white dark:bg-gray-800 transition-all p-6 rounded-lg shadow-lg transform hover:scale-105 ease-in-out duration-300">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 text-center">Shopping Cart</h2>
<div class="mt-4">
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/80/80" alt="Product Image" class="rounded-lg shadow-lg" />
<div class="flex-1 mx-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-200">Product Title</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">$19.99</p>
</div>
<div class="flex items-center">
<button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 ease-in-out duration-200">+</button>
<span class="mx-2 text-gray-800 dark:text-gray-100">1</span>
<button class="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 ease-in-out duration-200">-</button>
</div>
</div>
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/80/80?random=1" alt="Product Image" class="rounded-lg shadow-lg" />
<div class="flex-1 mx-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-200">Another Product</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">$29.99</p>
</div>
<div class="flex items-center">
<button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 ease-in-out duration-200">+</button>
<span class="mx-2 text-gray-800 dark:text-gray-100">1</span>
<button class="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 ease-in-out duration-200">-</button>
</div>
</div>
</div>
<div class="mt-6 flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
<span class="text-xl font-semibold text-gray-800 dark:text-gray-100">Total</span>
<span class="text-xl font-semibold text-gray-800 dark:text-gray-100">$49.98</span>
</div>
<div class="mt-4">
<button class="w-full bg-green-500 text-white text-lg font-semibold rounded-lg py-2 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 transition duration-200">
Checkout
</button>
</div>
</div>
</div>Verwandte Komponenten
Komponente des Einkaufswagens
Eine einfache, reaktionsschnelle Warenkorbkomponente mit Neumorphism-Design und komplementärem Farbschema für die Unterstützung dunkler Themen.
Komponente des Einkaufswagens
Eine brutalistische Warenkorbkomponente mit Unterstützung des Dunkelmodus und responsivem Design.
Komponente des Einkaufswagens
Eine komplexe, reaktionsschnelle Warenkorbkomponente mit Graustufen-Farbschema, die für Blog-/Content-Zwecke entwickelt wurde. Bietet Mikrointeraktionen mit Tailwind CSS, mit Unterstützung für den Dunkelmodus und ohne JavaScript.