Composants Caddie Composant de panier d’achat

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.

Aperçu

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

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.

Ouvrir