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.
HTML Code
<div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl">
<h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Shopping Cart</h1>
<div class="space-y-4">
<!-- Cart Item -->
<div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/80" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Product Name</h2>
<p class="text-gray-600 dark:text-gray-300">Quantity: 1</p>
<p class="text-gray-800 dark:text-white">$19.99</p>
</div>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
</div>
<!-- Cart Item -->
<div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/81" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Another Product</h2>
<p class="text-gray-600 dark:text-gray-300">Quantity: 2</p>
<p class="text-gray-800 dark:text-white">$29.50</p>
</div>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
</div>
</div>
<div class="mt-6 flex justify-end items-center">
<div class="text-xl font-bold text-gray-900 dark:text-white mr-4">Total: $69.00</div>
<button class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg shadow-xl">Checkout</button>
</div>
</div>Composants associés
Composant de panier d’achat 3D
Un composant de panier d’achat visuellement frappant avec des éléments de conception 3D qui créent de la profondeur et de l’engagement. Utilise un schéma de couleurs triadique (bleu primaire, rouge vif et jaune ambre) pour l’intérêt visuel. Cette interface complexe comprend des listes de produits avec des images, des contrôles de quantité, des résumés de prix et des effets de survol qui simulent le mouvement 3D. Entièrement réactif avec prise en charge du thème sombre. Le composant est conçu pour un environnement de contenu/blog où les lecteurs peuvent acheter des produits recommandés tout en consommant du contenu.
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.
Composant de panier d’achat
Composant de panier d’achat avec conception matérielle, palette de couleurs monochromatique et complexité modérée pour le commerce électronique. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS.