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.
HTML Code
<div class="container mx-auto p-4">
<div class="dark:bg-gray-800 bg-white shadow-md rounded-lg p-6">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Your Shopping Cart</h1>
<!-- Cart Item 1 -->
<div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
<img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product1/200/200" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h2>
<p class="text-gray-600 dark:text-gray-400">Category: Electronics</p>
<p class="text-gray-800 dark:text-white font-bold">$299.99</p>
</div>
<div class="text-gray-600 dark:text-gray-400">
Quantity: 1
</div>
</div>
<!-- Cart Item 2 -->
<div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
<img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product2/200/200" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-400">Category: Books</p>
<p class="text-gray-800 dark:text-white font-bold">$19.50</p>
</div>
<div class="text-gray-600 dark:text-gray-400">
Quantity: 2
</div>
</div>
<!-- Cart Summary -->
<div class="flex justify-between items-center mt-6">
<span class="text-xl font-semibold text-gray-800 dark:text-white">Total:</span>
<span class="text-xl font-bold text-gray-800 dark:text-white">$339.99</span>
</div>
<div class="mt-6 flex justify-end">
<button class="px-6 py-3 bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">
Checkout
</button>
</div>
</div>
</div>Composants associés
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.
Composant de panier d’achat
Un composant de panier d’achat réactif conçu avec un style brutal, avec un contraste élevé et des mises en page inhabituelles. Il prend en charge le thème sombre avec Tailwind CSS.
Composant de panier d’achat
Un composant de panier d’achat réactif conçu pour une plateforme de commerce électronique, avec un style de conception 3D et une palette de couleurs pastel. Il est équipé de plusieurs éléments interactifs tels que des listes de produits, des quantités et un bouton de paiement, prenant en charge le thème sombre.