Composant de panier d’achat
Un composant de panier d’achat simple et réactif imitant le design du monde réel avec des couleurs vives, adapté au commerce électronique.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Shopping Cart</h2>
<ul class="mt-4 space-y-4">
<li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
<div class="flex-1 ml-4">
<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">$29.99</p>
</div>
<input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
</li>
<li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
<div class="flex-1 ml-4">
<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">$49.99</p>
</div>
<input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
</li>
</ul>
<div class="mt-6">
<button class="w-full py-3 text-lg font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
Checkout
</button>
</div>
</div>Composants associés
Composant de panier d’achat
Un composant de panier d’achat brutaliste avec prise en charge du mode sombre et conception réactive.
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.
Composant de panier d’achat
Un composant de panier d’achat réactif conçu avec un style brutal, avec un contraste élevé et des mises en page inhabituelles. Il prend en charge le thème sombre avec Tailwind CSS.