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.
HTML Code
<div class='bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md mx-auto transform transition-all duration-300 hover:scale-105'>
<h2 class='text-xl font-semibold text-gray-800 dark:text-white'>Shopping Cart</h2>
<ul class='mt-4 space-y-4'>
<li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
<img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
<div class='flex-grow pl-4'>
<h3 class='text-gray-800 dark:text-white font-medium'>Product Name</h3>
<p class='text-gray-600 dark:text-gray-300'>$19.99</p>
</div>
<button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
</li>
<li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
<img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
<div class='flex-grow pl-4'>
<h3 class='text-gray-800 dark:text-white font-medium'>Another Product</h3>
<p class='text-gray-600 dark:text-gray-300'>$29.99</p>
</div>
<button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
</li>
</ul>
<div class='mt-6 flex justify-between items-center'>
<span class='text-gray-800 dark:text-white text-lg'>Total:</span>
<span class='text-gray-800 dark:text-white text-lg font-semibold'>$49.98</span>
</div>
<button class='mt-5 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition'>Proceed to Checkout</button>
</div>Composants associés
Chariot de supermarché Neumorphic
Composant de panier d’achat Neumorphic utilisant une combinaison de couleurs triadique. Il a une complexité modérée, conçu pour les sites Web d’entreprise. Le composant est réactif et inclut la prise en charge du mode sombre à l’aide du préfixe dark : de Tailwind. Comprend des espaces réservés pour les articles avec la quantité et le prix, un sous-total et un bouton de paiement. Utilise picsum.photos pour les images de produits.
Retro_Vintage_Shopping_Cart_Component
Un composant de panier d’achat simple, de style rétro/vintage avec une palette de couleurs en niveaux de gris, optimisé pour les sites Web d’entreprise/d’entreprise et entièrement réactif avec prise en charge du mode sombre.
Composant de panier d’achat
Un composant de panier d’achat complexe et réactif avec une palette de couleurs en niveaux de gris, conçu à des fins de blog/contenu. Propose des micro-interactions à l’aide de Tailwind CSS, avec prise en charge du mode sombre et sans JavaScript.