Composant de panier d’achat
Un composant de panier d’achat conçu avec le skeuomorphisme. Il présente des éléments numériques qui imitent leurs homologues du monde réel, une prise en charge réactive complète et une compatibilité avec les thèmes sombres.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10 p-5">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">Shopping Cart</h2>
<div class="mb-4">
<div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
<img src="https://picsum.photos/50?random=1" alt="Product Image" class="w-16 h-16 rounded shadow-md">
<div class="flex-1 ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
</div>
<div class="mb-4">
<div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
<img src="https://picsum.photos/50?random=2" alt="Product Image" class="w-16 h-16 rounded shadow-md">
<div class="flex-1 ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
</div>
<div class="flex justify-between font-bold text-lg mt-5">
<span class="text-gray-800 dark:text-white">Total:</span>
<span class="text-gray-800 dark:text-white">$49.98</span>
</div>
<button class="mt-5 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full">Checkout</button>
</div>Composants associés
Composant de panier d’achat
Un composant simple de panier d’achat en mode sombre avec un design réactif, avec des listes de produits, des quantités et un total. Il utilise une palette de couleurs triadique avec un fond sombre. Il est conçu pour la consommation de contenu.
Memphis_Industrial_Shopping_Cart_Component
Un composant de panier d’achat simple et réactif avec une influence Memphis Design adapté aux contextes industriels/manufacturiers, avec une palette monochrome avec une seule couleur d’accent vive et une prise en charge du mode sombre.
Composant de panier d’achat
Un composant de panier d’achat complexe et réactif avec des micro-interactions et des couleurs analogues, pour les médias sociaux, avec prise en charge du mode sombre à l’aide de Tailwind CSS.