Composant de panier d’achat
Un composant de panier d’achat brutaliste avec prise en charge du mode sombre et conception réactive.
HTML Code
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900 border-4 border-black dark:border-white">
<h1 class="text-2xl font-bold mb-4 text-black dark:text-white">Shopping Cart</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="border-2 border-black dark:border-white p-4 relative">
<img src="https://picsum.photos/seed/item1/300/200" alt="Item 1" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
<h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 1</h2>
<p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 1.</p>
<p class="text-black dark:text-white font-bold">$19.99</p>
<button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
</div>
<div class="border-2 border-black dark:border-white p-4 relative">
<img src="https://picsum.photos/seed/item2/300/200" alt="Item 2" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
<h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 2</h2>
<p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 2.</p>
<p class="text-black dark:text-white font-bold">$29.99</p>
<button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
</div>
<div class="border-2 border-black dark:border-white p-4 relative">
<img src="https://picsum.photos/seed/item3/300/200" alt="Item 3" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
<h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 3</h2>
<p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 3.</p>
<p class="text-black dark:text-white font-bold">$39.99</p>
<button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
</div>
</div>
<div class="mt-8 border-t-4 border-black dark:border-white pt-4 flex justify-between items-center">
<h2 class="text-xl font-bold text-black dark:text-white">Total:</h2>
<p class="text-xl font-bold text-black dark:text-white">$89.97</p>
</div>
<div class="mt-4 flex justify-end">
<button class="p-4 bg-black text-white dark:bg-white dark:text-black border-4 border-black dark:border-white text-xl font-bold">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.
Composant de panier d’achat
Un composant de panier d’achat simple et réactif avec un design Neumorphism et une palette de couleurs complémentaire pour la prise en charge du thème sombre.
RetroShoppingcartComponent
Un composant de panier d’achat réactif avec une esthétique rétro/vintage, une palette de couleurs triadique et une prise en charge du mode sombre, adapté à un portefeuille.