Composant de panier d’achat
Un composant de panier d’achat conçu avec des effets de Glassmorphism, utilisant une palette de couleurs complémentaires et optimisé pour le mode sombre. Parfait pour une utilisation en portefeuille, pour présenter des travaux ou des produits.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-600 p-6 w-full max-w-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white text-center">Shopping Cart</h2>
<div class="mt-4">
<div class="flex items-center justify-between border-b pb-2 mb-2">
<img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md" />
<div class="flex-1 mx-2">
<h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Product Name</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">$29.99</p>
</div>
<span class="text-gray-600 dark:text-gray-200">Quantity: 1</span>
</div>
<div class="flex items-center justify-between border-b pb-2 mb-2">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md" />
<div class="flex-1 mx-2">
<h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Another Product</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">$19.99</p>
</div>
<span class="text-gray-600 dark:text-gray-200">Quantity: 2</span>
</div>
</div>
<div class="flex items-center justify-between border-t pt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Total:</h3>
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$69.97</span>
</div>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Checkout</button>
</div>
</div>Composants associés
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
Un composant de panier d’achat conçu en 3D avec des effets réactifs et une prise en charge du thème 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.