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
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.
Composant de panier d’achat
Un composant de panier d’achat complexe et réactif avec des micro-interactions et des couleurs analogues, pour les médias sociaux, avec prise en charge du mode sombre à l’aide de Tailwind CSS.
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.