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
Retro_Vintage_Shopping_Cart_Component
Un composant de panier d’achat simple, de style rétro/vintage avec une palette de couleurs en niveaux de gris, optimisé pour les sites Web d’entreprise/d’entreprise et entièrement réactif avec prise en charge du mode sombre.
Composant de panier d’achat - Aquarelle/Sépia artistique
Un composant de panier d’achat simple et réactif avec un style aquarelle/artistique utilisant des tons sépia/bruns, adapté aux entreprises manufacturières/industrielles. Inclut la prise en charge du mode sombre.
OrganiqueNatureSportsShoppingCartComposant
Un composant de panier d’achat simple et réactif avec un design inspiré de l’agriculture et de la nature, une palette de couleurs triadique, adapté aux applications de sport et de fitness, avec prise en charge du mode sombre.