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 réactif avec un design skeuomorphe, avec la prise en charge du thème sombre et des images d’espace réservé aléatoires.
Composant de panier d’achat
Un composant de panier d’achat optimisé pour les interfaces de médias sociaux, avec des micro-interactions, des couleurs vives et une mise en page simple. Comprend la conception réactive et la prise en charge du mode sombre.
Composant de panier d’achat
Un composant de panier d’achat de style rétro/vintage avec une palette de couleurs en niveaux de gris, une complexité modérée et un design réactif avec prise en charge du thème sombre. Conçu pour les sites Web d’entreprise/d’entreprise utilisant Tailwind CSS. Pas de JavaScript, seulement du HTML avec des classes Tailwind. Utilise picsum.photos pour les images et randomuser.me pour les avatars.