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 conçu en 3D avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Chariot de supermarché Neumorphic
Composant de panier d’achat Neumorphic utilisant une combinaison de couleurs triadique. Il a une complexité modérée, conçu pour les sites Web d’entreprise. Le composant est réactif et inclut la prise en charge du mode sombre à l’aide du préfixe dark : de Tailwind. Comprend des espaces réservés pour les articles avec la quantité et le prix, un sous-total et un bouton de paiement. Utilise picsum.photos pour les images de produits.
Composant de panier d’achat
Composant de panier d’achat avec style Microinteractions, effets réactifs et prise en charge du thème sombre.