Composant de panier d’achat
Un composant de panier d’achat simple et réactif avec un design Neumorphism et une palette de couleurs complémentaire pour la prise en charge du thème sombre.
HTML Code
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg"> <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Shopping Cart</h2> <ul class="space-y-4"> <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600"> <img src="https://picsum.photos/50/50" alt="Product Image" class="mr-4 rounded"> <div class="flex-1"> <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3> <p class="text-gray-600 dark:text-gray-400">$19.99</p> </div> <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button> </li> <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600"> <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="mr-4 rounded"> <div class="flex-1"> <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3> <p class="text-gray-600 dark:text-gray-400">$29.99</p> </div> <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button> </li> </ul> <div class="mt-6"> <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Total: <span class="text-blue-500">$49.98</span></h4> </div> <button class="mt-4 bg-green-500 text-white rounded-full px-4 py-2 shadow transition duration-300 hover:bg-green-600">Checkout</button> <footer class="mt-6 text-center text-gray-600 dark:text-gray-400"> <p>Created for Portfolio</p> </footer> </div>Composants associés
Composant de panier d’achat
Un composant de panier d’achat de style Neumorphic pour le commerce électronique, doté d’une palette de couleurs monochromatiques, d’éléments interactifs riches et d’une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de panier d’achat
Un composant de panier d’achat simple et réactif imitant le design du monde réel avec des couleurs vives, adapté au commerce électronique.
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.