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.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto mt-10">
<h2 class="text-2xl font-bold text-center text-black dark:text-white">Shopping Cart</h2>
<ul class="mt-4">
<li class="flex items-center justify-between py-2 border-b border-gray-300">
<img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<input type="number" value="1" class="border rounded-md w-16 text-center" />
<button class="ml-2 text-red-500 font-bold">Remove</button>
</li>
<li class="flex items-center justify-between py-2 border-b border-gray-300">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">$49.99</p>
</div>
<input type="number" value="1" class="border rounded-md w-16 text-center" />
<button class="ml-2 text-red-500 font-bold">Remove</button>
</li>
<li class="flex items-center justify-between py-2 border-b border-gray-300">
<img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="rounded-md">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<input type="number" value="1" class="border rounded-md w-16 text-center" />
<button class="ml-2 text-red-500 font-bold">Remove</button>
</li>
</ul>
<div class="mt-4 flex justify-between">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total:</p>
<p class="text-lg font-bold text-gray-800 dark:text-gray-200">$99.97</p>
</div>
<button class="mt-6 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md transition duration-300 ease-in-out">Checkout</button>
</div>
Composants associés
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.
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.