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.
HTML Code
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
<div class="space-y-4">
<!-- Cart Item -->
<div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro1/100/100" alt="Product Image">
<div>
<h3 class="text-gray-800 dark:text-white font-medium">Retro T-Shirt</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">Size: L</p>
</div>
</div>
<div class="text-gray-700 dark:text-gray-200 font-semibold">$29.99</div>
</div>
<!-- Cart Item -->
<div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro2/100/100" alt="Product Image">
<div>
<h3 class="text-gray-800 dark:text-white font-medium">Vintage Jeans</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">Size: 32</p>
</div>
</div>
<div class="text-gray-700 dark:text-gray-200 font-semibold">$59.99</div>
</div>
</div>
<div class="flex justify-between items-center mt-6">
<div class="text-xl font-bold text-gray-800 dark:text-white">Total:</div>
<div class="text-xl font-bold text-gray-800 dark:text-white">$89.98</div>
</div>
<button class="mt-6 w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded dark:bg-teal-500 dark:hover:bg-teal-600 filter sepia">Checkout</button>
</div>
</div>Composants associés
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.
Composant de panier d’achat
Un composant de panier d’achat simple et réactif avec prise en charge du thème sombre, stylisé à l’aide de Tailwind CSS suivant les principes de conception matérielle avec une palette de couleurs en niveaux de gris. Utilise picsum.photos pour les images de produits.
Composant de panier d’achat
Un composant de panier d’achat à thème rétro/vintage avec une palette de couleurs monochromatiques, une complexité modérée, un design réactif et une prise en charge du mode sombre. Convient aux sites Web d’entreprise/d’entreprise.