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
Composant de panier d’achat avec conception 3D, tons de terre et éléments interactifs complexes. Il est conçu pour un site Web de blog/contenu, avec un design réactif et une prise en charge du thème sombre, en utilisant Tailwind CSS.
Composant de panier d’achat
Il s’agit d’un composant de panier d’achat simple pour le commerce électronique, avec un aspect Material Design réactif, une palette de couleurs complémentaire et une prise en charge du thème sombre.
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.