Composant de panier d’achat
Composant de panier d’achat avec un design brutaliste, des effets réactifs et la prise en charge du thème sombre.
HTML Code
<div class="container mx-auto p-8 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono">
<h1 class="text-5xl font-bold mb-8 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Your Cart</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white dark:bg-gray-800 p-6 border-4 border-gray-900 dark:border-gray-100">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold">Item Name</h2>
<span class="text-xl font-bold">$99.99</span>
</div>
<p class="mb-4">Brief description of the item goes here. Brutalist aesthetic with high contrast and strong lines.</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-r-0">-</button>
<span class="px-4 py-1 border-y-4 border-gray-900 dark:border-gray-100 text-xl">1</span>
<button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-l-0">+</button>
</div>
<button class="text-red-600 font-bold border-4 border-red-600 px-4 py-2">Remove</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-6 border-4 border-gray-900 dark:border-gray-100">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold">Another Item</h2>
<span class="text-xl font-bold">$199.99</span>
</div>
<p class="mb-4">Another description for another item. Keeping with the raw and bold design principles.</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-r-0">-</button>
<span class="px-4 py-1 border-y-4 border-gray-900 dark:border-gray-100 text-xl">2</span>
<button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-l-0">+</button>
</div>
<button class="text-red-600 font-bold border-4 border-red-600 px-4 py-2">Remove</button>
</div>
</div>
</div>
<div class="mt-8 border-t-4 border-gray-900 dark:border-gray-100 pt-8 flex justify-between items-center">
<h2 class="text-3xl font-bold">Total</h2>
<span class="text-3xl font-bold">$299.98</span>
</div>
<div class="mt-8 text-right">
<button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-2xl font-bold px-8 py-4 border-4 border-gray-900 dark:border-gray-100">Checkout</button>
</div>
</div>Composants associés
Composant de panier d’achat 3D
Un composant de panier d’achat visuellement frappant avec des éléments de conception 3D qui créent de la profondeur et de l’engagement. Utilise un schéma de couleurs triadique (bleu primaire, rouge vif et jaune ambre) pour l’intérêt visuel. Cette interface complexe comprend des listes de produits avec des images, des contrôles de quantité, des résumés de prix et des effets de survol qui simulent le mouvement 3D. Entièrement réactif avec prise en charge du thème sombre. Le composant est conçu pour un environnement de contenu/blog où les lecteurs peuvent acheter des produits recommandés tout en consommant du contenu.
Composant de panier d’épicerie - Inspiré de la nature
Un composant de chariot d’épicerie complexe, inspiré de la nature, pour les applications de sport/fitness, avec des lignes fluides, une palette de couleurs complémentaires, une réactivité et une prise en charge du mode sombre.
Composant de panier d’achat
Un composant de panier d’achat simple et réactif imitant le design du monde réel avec des couleurs vives, adapté au commerce électronique.