Composant de panier d’achat
Un composant de panier d’achat avec un design Skeuomorphism, des effets réactifs et la prise en charge du thème sombre.
HTML Code
<div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl">
<h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Shopping Cart</h1>
<div class="space-y-4">
<!-- Cart Item -->
<div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/80" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Product Name</h2>
<p class="text-gray-600 dark:text-gray-300">Quantity: 1</p>
<p class="text-gray-800 dark:text-white">$19.99</p>
</div>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
</div>
<!-- Cart Item -->
<div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/81" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Another Product</h2>
<p class="text-gray-600 dark:text-gray-300">Quantity: 2</p>
<p class="text-gray-800 dark:text-white">$29.50</p>
</div>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
</div>
</div>
<div class="mt-6 flex justify-end items-center">
<div class="text-xl font-bold text-gray-900 dark:text-white mr-4">Total: $69.00</div>
<button class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg shadow-xl">Checkout</button>
</div>
</div>Composants associés
Composant de panier d’achat
Un composant de panier d’achat conçu en 3D avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de panier d’achat
Un composant de panier d’achat simple et réactif avec un design rétro/vintage, une palette de couleurs complémentaire et une prise en charge du mode sombre, conçu à l’aide de Tailwind CSS.
Composant de panier d’achat
Un composant de panier d’achat complexe et réactif avec une palette de couleurs en niveaux de gris, conçu à des fins de blog/contenu. Propose des micro-interactions à l’aide de Tailwind CSS, avec prise en charge du mode sombre et sans JavaScript.