Composant de panier d’achat
Un composant de panier d’achat réactif conçu avec un style brutal, avec un contraste élevé et des mises en page inhabituelles. Il prend en charge le thème sombre avec Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
<div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
<img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
<div class="flex-1 px-4">
<h3 class="font-semibold text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 dark:text-gray-300">$49.99</p>
</div>
<button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
</div>
<div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
<img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
<div class="flex-1 px-4">
<h3 class="font-semibold text-gray-800 dark:text-white">Another Product</h3>
<p class="text-gray-600 dark:text-gray-300">$29.99</p>
</div>
<button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
</div>
<div class="flex justify-between items-center mt-4">
<h4 class="text-xl font-bold text-gray-800 dark:text-white">Total:</h4>
<p class="text-xl font-bold text-gray-800 dark:text-white">$79.98</p>
</div>
<button class="w-full mt-4 bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition duration-200">Checkout</button>
</div>
<div class="flex items-center justify-center mt-4">
<p class="text-gray-600 dark:text-gray-300 text-sm">Need help? <a href="#" class="text-blue-500 hover:underline">Contact us</a></p>
</div>
</div>Composants associés
Composant de panier d’achat
Un composant de panier d’achat simple et minimaliste utilisant Tailwind CSS, avec une palette de couleurs de tons de terre, un objectif de médias sociaux et une prise en charge du thème sombre. Il est réactif et comprend des exemples d’articles. Ce composant est conçu pour un affichage de base avec un minimum d’éléments et sans JavaScript.
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 de style rétro vintage avec un design réactif et une prise en charge du mode sombre, utilisant Tailwind CSS et proposant des images et des avatars de remplacement.