Composant de panier d’achat
Un composant de panier d’achat de style Neumorphic pour le commerce électronique, doté d’une palette de couleurs monochromatiques, d’éléments interactifs riches et d’une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6">
<div class="bg-white dark:bg-gray-800 shadow-inner rounded-xl p-8 max-w-md w-full">
<h2 class="text-gray-800 dark:text-white text-2xl font-semibold mb-6 text-center">Shopping Cart</h2>
<div class="space-y-4">
<div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
<img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
<div class="flex-1 ml-4">
<h3 class="text-gray-800 dark:text-white font-medium">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<div class="flex items-center">
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
<span class="mx-2">1</span>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
</div>
</div>
<div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
<img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
<div class="flex-1 ml-4">
<h3 class="text-gray-800 dark:text-white font-medium">Another Product</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<div class="flex items-center">
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
<span class="mx-2">2</span>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
</div>
</div>
</div>
<div class="mt-6 bg-gray-300 dark:bg-gray-600 rounded-lg p-4 flex justify-between items-center">
<span class="text-gray-800 dark:text-white font-bold">Total:</span>
<span class="text-lg text-gray-800 dark:text-white font-semibold">$69.97</span>
</div>
<div class="mt-4 flex justify-center">
<button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow">
Checkout
</button>
</div>
</div>
</div>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 réactif conçu avec un style brutal, avec un contraste élevé et des mises en page inhabituelles. Il prend en charge le thème sombre avec Tailwind CSS.
Composant de panier d’achat
Un composant de panier d’achat optimisé pour les interfaces de médias sociaux, avec des micro-interactions, des couleurs vives et une mise en page simple. Comprend la conception réactive et la prise en charge du mode sombre.