Composant de panier d’achat
Un composant de panier d’achat à thème rétro/vintage avec une palette de couleurs monochromatiques, une complexité modérée, un design réactif et une prise en charge du mode sombre. Convient aux sites Web d’entreprise/d’entreprise.
HTML Code
<div class="container mx-auto p-4">
<div class="max-w-md mx-auto rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden">
<div class="px-6 py-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
<div class="flex items-center mb-4">
<img src="https://picsum.photos/seed/retro1/80/80" alt="Product Image" class="w-16 h-16 object-cover rounded-lg dark:brightness-75">
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<div class="ml-auto">
<span class="text-gray-700 dark:text-gray-200">Qty: 1</span>
</div>
</div>
<div class="flex items-center mb-4">
<img src="https://picsum.photos/seed/retro2/80/80" alt="Product Image" class="w-16 h-16 object-cover rounded-lg dark:brightness-75">
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<div class="ml-auto">
<span class="text-gray-700 dark:text-gray-200">Qty: 2</span>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-600 pt-4">
<div class="flex justify-between">
<span class="text-lg font-semibold text-gray-800 dark:text-white">Total:</span>
<span class="text-lg font-semibold text-gray-800 dark:text-white">$79.97</span>
</div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 px-6 py-4">
<button class="w-full bg-blue-500 dark:bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Checkout</button>
</div>
</div>
</div>Composants associés
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.
Composant de panier d’achat
Un composant de panier d’achat de style rétro vintage avec un design réactif et une prise en charge du mode sombre, utilisant Tailwind CSS et proposant des images et des avatars de remplacement.
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.