Composant de panier d’achat
Un composant de panier d’achat de style rétro vintage avec un design réactif et une prise en charge du mode sombre, utilisant Tailwind CSS et proposant des images et des avatars de remplacement.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto mt-10">
<h2 class="text-2xl font-bold text-center text-black dark:text-white">Shopping Cart</h2>
<ul class="mt-4">
<li class="flex items-center justify-between py-2 border-b border-gray-300">
<img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<input type="number" value="1" class="border rounded-md w-16 text-center" />
<button class="ml-2 text-red-500 font-bold">Remove</button>
</li>
<li class="flex items-center justify-between py-2 border-b border-gray-300">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">$49.99</p>
</div>
<input type="number" value="1" class="border rounded-md w-16 text-center" />
<button class="ml-2 text-red-500 font-bold">Remove</button>
</li>
<li class="flex items-center justify-between py-2 border-b border-gray-300">
<img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="rounded-md">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<input type="number" value="1" class="border rounded-md w-16 text-center" />
<button class="ml-2 text-red-500 font-bold">Remove</button>
</li>
</ul>
<div class="mt-4 flex justify-between">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total:</p>
<p class="text-lg font-bold text-gray-800 dark:text-gray-200">$99.97</p>
</div>
<button class="mt-6 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md transition duration-300 ease-in-out">Checkout</button>
</div>
Composants associés
Composant de panier d’achat
Composant de panier d’achat avec conception matérielle, palette de couleurs monochromatique et complexité modérée pour le commerce électronique. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Chariot de supermarché Neumorphic
Composant de panier d’achat Neumorphic utilisant une combinaison de couleurs triadique. Il a une complexité modérée, conçu pour les sites Web d’entreprise. Le composant est réactif et inclut la prise en charge du mode sombre à l’aide du préfixe dark : de Tailwind. Comprend des espaces réservés pour les articles avec la quantité et le prix, un sous-total et un bouton de paiement. Utilise picsum.photos pour les images de produits.
Composant de panier d’achat
Un composant de panier d’achat réactif avec un design skeuomorphe, avec la prise en charge du thème sombre et des images d’espace réservé aléatoires.