Composant de panier d’achat
Un composant de panier d’achat conçu avec des effets de Glassmorphism, utilisant une palette de couleurs complémentaires et optimisé pour le mode sombre. Parfait pour une utilisation en portefeuille, pour présenter des travaux ou des produits.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-600 p-6 w-full max-w-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white text-center">Shopping Cart</h2>
<div class="mt-4">
<div class="flex items-center justify-between border-b pb-2 mb-2">
<img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md" />
<div class="flex-1 mx-2">
<h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Product Name</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">$29.99</p>
</div>
<span class="text-gray-600 dark:text-gray-200">Quantity: 1</span>
</div>
<div class="flex items-center justify-between border-b pb-2 mb-2">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md" />
<div class="flex-1 mx-2">
<h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Another Product</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">$19.99</p>
</div>
<span class="text-gray-600 dark:text-gray-200">Quantity: 2</span>
</div>
</div>
<div class="flex items-center justify-between border-t pt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Total:</h3>
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$69.97</span>
</div>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Checkout</button>
</div>
</div>Composants associés
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 d’entreprise rétro
Un composant de panier d’achat complexe et réactif avec un style de design rétro/vintage, axé sur l’esthétique des années 80/90 et les tons bleus d’entreprise, adapté aux applications manufacturières/industrielles. Comprend la prise en charge du mode sombre et des éléments interactifs.
Composant de panier d’achat
Un composant de panier d’achat conçu avec le skeuomorphisme. Il présente des éléments numériques qui imitent leurs homologues du monde réel, une prise en charge réactive complète et une compatibilité avec les thèmes sombres.