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 simple et minimaliste utilisant Tailwind CSS, avec une palette de couleurs de tons de terre, un objectif de médias sociaux et une prise en charge du thème sombre. Il est réactif et comprend des exemples d’articles. Ce composant est conçu pour un affichage de base avec un minimum d’éléments et sans JavaScript.
Panier d’achat rétro/vintage
Composant de panier d’achat avec un style rétro / vintage, une palette de couleurs pastel et une complexité simple. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de panier d’achat
Un composant de panier d’achat conçu avec des effets de Glassmorphism, utilisant une palette de couleurs complémentaires et optimisé pour le mode sombre. Parfait pour une utilisation en portefeuille, pour présenter des travaux ou des produits.