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.
HTML Code
<div class="min-h-screen bg-white dark:bg-gray-800 transition-all p-6 rounded-lg shadow-lg transform hover:scale-105 ease-in-out duration-300">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 text-center">Shopping Cart</h2>
<div class="mt-4">
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/80/80" alt="Product Image" class="rounded-lg shadow-lg" />
<div class="flex-1 mx-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-200">Product Title</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">$19.99</p>
</div>
<div class="flex items-center">
<button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 ease-in-out duration-200">+</button>
<span class="mx-2 text-gray-800 dark:text-gray-100">1</span>
<button class="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 ease-in-out duration-200">-</button>
</div>
</div>
<div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/80/80?random=1" alt="Product Image" class="rounded-lg shadow-lg" />
<div class="flex-1 mx-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-200">Another Product</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">$29.99</p>
</div>
<div class="flex items-center">
<button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 ease-in-out duration-200">+</button>
<span class="mx-2 text-gray-800 dark:text-gray-100">1</span>
<button class="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 ease-in-out duration-200">-</button>
</div>
</div>
</div>
<div class="mt-6 flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
<span class="text-xl font-semibold text-gray-800 dark:text-gray-100">Total</span>
<span class="text-xl font-semibold text-gray-800 dark:text-gray-100">$49.98</span>
</div>
<div class="mt-4">
<button class="w-full bg-green-500 text-white text-lg font-semibold rounded-lg py-2 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 transition duration-200">
Checkout
</button>
</div>
</div>
</div>Composants associés
Composant de panier d’achat
Un composant de panier d’achat de style rétro/vintage avec une palette de couleurs en niveaux de gris, une complexité modérée et un design réactif avec prise en charge du thème sombre. Conçu pour les sites Web d’entreprise/d’entreprise utilisant Tailwind CSS. Pas de JavaScript, seulement du HTML avec des classes Tailwind. Utilise picsum.photos pour les images et randomuser.me pour les avatars.
Composant de panier d’achat
Composant de panier d’achat skeuomorphe avec palette de couleurs pastel, prise en charge du mode réactif et sombre.
Composant de panier d’achat
Un composant de panier d’achat avec un design Skeuomorphism, des effets réactifs et la prise en charge du thème sombre.