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.
HTML Code
<div class="container mx-auto p-4 dark:bg-gray-800 dark:text-white">
<div class="neumorphic-card p-6 rounded-xl shadow-xl dark:shadow-2xl">
<h2 class="text-2xl font-semibold mb-6 text-center dark:text-white">Shopping Cart</h2>
<div class="space-y-4">
<!-- Cart Item 1 -->
<div class="neumorphic-item p-4 rounded-lg shadow-md flex items-center dark:shadow-lg">
<img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md mr-4 shadow-inner dark:shadow-sm">
<div class="flex-grow">
<h3 class="text-lg font-medium dark:text-white">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
<p class="text-lg font-semibold text-blue-600 dark:text-blue-400">$49.98</p>
</div>
<button class="ml-4 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Cart Item 2 -->
<div class="neumorphic-item p-4 rounded-lg shadow-md flex items-center dark:shadow-lg">
<img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md mr-4 shadow-inner dark:shadow-sm">
<div class="flex-grow">
<h3 class="text-lg font-medium dark:text-white">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
<p class="text-lg font-semibold text-green-600 dark:text-green-400">$24.50</p>
</div>
<button class="ml-4 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
</div>
<div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex justify-between items-center">
<span class="text-xl font-semibold dark:text-white">Subtotal:</span>
<span class="text-xl font-bold text-purple-600 dark:text-purple-400">$74.48</span>
</div>
</div>
<div class="mt-6">
<button class="w-full py-3 rounded-lg bg-blue-600 text-white text-lg font-semibold shadow-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-200 ease-in-out dark:shadow-xl">Proceed to Checkout</button>
</div>
</div>
</div>
<style>
.neumorphic-card {
background: #e0e0e0;
box-shadow: 9px 9px 16px #a3a3a3, -9px -9px 16px #ffffff;
}
.dark .neumorphic-card {
background: #374151;
box-shadow: 9px 9px 16px #252c38, -9px -9px 16px #49566a;
}
.neumorphic-item {
background: #e0e0e0;
box-shadow: inset 5px 5px 10px #a3a3a3, inset -5px -5px 10px #ffffff;
}
.dark .neumorphic-item {
background: #374151;
box-shadow: inset 5px 5px 10px #252c38, inset -5px -5px 10px #49566a;
}
</style>Composants associés
Composant de panier d’achat
Un composant simple de panier d’achat en mode sombre avec un design réactif, avec des listes de produits, des quantités et un total. Il utilise une palette de couleurs triadique avec un fond sombre. Il est conçu pour la consommation de contenu.
Composant de panier d’achat
Un composant de panier d’achat conçu avec le skeuomorphisme. Il présente des éléments numériques qui imitent leurs homologues du monde réel, une prise en charge réactive complète et une compatibilité avec les thèmes sombres.
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.