Composant de panier d’achat
Un composant simple de panier d’achat en mode sombre avec un design réactif, avec des listes de produits, des quantités et un total. Il utilise une palette de couleurs triadique avec un fond sombre. Il est conçu pour la consommation de contenu.
HTML Code
<div class="dark:bg-gray-900 dark:text-white min-h-screen p-4">
<h1 class="text-2xl font-bold mb-6 text-center text-blue-400">Your Shopping Cart</h1>
<div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-5">
<!-- Product Item 1 -->
<div class="flex items-center mb-5">
<img src="https://picsum.photos/id/237/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-green-400">Awesome Gadget</h3>
<p class="text-gray-400">Quantity: 1</p>
</div>
<span class="text-lg font-bold text-red-400">$29.99</span>
</div>
<!-- Product Item 2 -->
<div class="flex items-center mb-5">
<img src="https://picsum.photos/id/238/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-green-400">Super Item</h3>
<p class="text-gray-400">Quantity: 2</p>
</div>
<span class="text-lg font-bold text-red-400">$19.50</span>
</div>
<!-- Product Item 3 -->
<div class="flex items-center mb-5">
<img src="https://picsum.photos/id/239/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-green-400">Mega Product</h3>
<p class="text-gray-400">Quantity: 1</p>
</div>
<span class="text-lg font-bold text-red-400">$49.00</span>
</div>
<!-- Total -->
<div class="border-t border-gray-700 pt-4 flex justify-between items-center">
<span class="text-xl font-bold text-blue-400">Total:</span>
<span class="text-xl font-bold text-red-400">$98.49</span>
</div>
<button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-300">
Proceed to Checkout
</button>
</div>
<!-- Responsive adjustments -->
<style>
@media (max-width: 640px) {
.max-w-md {
margin-left: 1rem;
margin-right: 1rem;
}
}
</style>
</div>Composants associés
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.
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.
Composant de panier d’achat
Un composant de panier d’achat optimisé pour les interfaces de médias sociaux, avec des micro-interactions, des couleurs vives et une mise en page simple. Comprend la conception réactive et la prise en charge du mode sombre.