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 avec un design skeuomorphe, avec la prise en charge du thème sombre et des images d’espace réservé aléatoires.
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.
RetroShoppingcartComponent
Un composant de panier d’achat réactif avec une esthétique rétro/vintage, une palette de couleurs triadique et une prise en charge du mode sombre, adapté à un portefeuille.