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.
HTML Code
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h1>
<div class="space-y-4">
<!-- Cart Item 1 -->
<div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
<img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h2>
<p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
<p class="text-gray-800 dark:text-white font-bold">$19.99</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Cart Item 2 -->
<div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
<img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
<p class="text-gray-800 dark:text-white font-bold">$39.98</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Cart Item 3 -->
<div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
<img src="https://picsum.photos/seed/item3/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 3</h2>
<p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
<p class="text-gray-800 dark:text-white font-bold">$9.50</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
</div>
<!-- Cart Summary -->
<div class="mt-6 flex justify-between items-center">
<span class="text-xl font-bold text-gray-800 dark:text-white">Total:</span>
<span class="text-xl font-bold text-gray-800 dark:text-white">$69.47</span>
</div>
<button class="mt-6 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded dark:bg-green-700 dark:hover:bg-green-800">
Checkout
</button>
</div>Composants associés
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.
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
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.