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
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 simple et réactif avec prise en charge du thème sombre, stylisé à l’aide de Tailwind CSS suivant les principes de conception matérielle avec une palette de couleurs en niveaux de gris. Utilise picsum.photos pour les images de produits.
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.