Memphis_Industrial_Shopping_Cart_Component
Un composant de panier d’achat simple et réactif avec une influence Memphis Design adapté aux contextes industriels/manufacturiers, avec une palette monochrome avec une seule couleur d’accent vive et une prise en charge du mode sombre.
HTML Code
<div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-50 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
<div class="w-full max-w-sm sm:max-w-md lg:max-w-lg bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden relative border border-gray-200 dark:border-gray-700">
<!-- Memphis Design Elements (Abstract) -->
<div class="absolute top-0 left-0 w-24 h-24 bg-rose-500 dark:bg-rose-600 opacity-70 transform -translate-x-12 -translate-y-12 rotate-45 z-0"></div>
<div class="absolute bottom-0 right-0 w-32 h-32 bg-gray-700 dark:bg-gray-600 opacity-30 transform translate-x-16 translate-y-16 skew-x-12 z-0"></div>
<div class="absolute top-1/4 right-0 w-16 h-16 bg-black dark:bg-gray-900 opacity-40 rounded-full z-0"></div>
<div class="relative z-10 p-5 sm:p-6 lg:p-8">
<h2 class="text-2xl sm:text-3xl font-extrabold text-black dark:text-white mb-6 text-center tracking-tight uppercase">
Your Order Inquiry
</h2>
<!-- Cart Item -->
<div class="flex items-center bg-white dark:bg-gray-900 rounded-lg p-3 sm:p-4 mb-4 shadow border border-gray-200 dark:border-gray-700">
<div class="flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden relative">
<img src="https://picsum.photos/id/684/80/80" alt="Industrial Part 1" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-rose-500 opacity-20"></div>
</div>
<div class="ml-4 flex-grow">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-50 mb-1 leading-tight">High-Precision Bearing</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Part #ABC-12345</p>
<div class="flex items-center mt-2">
<span class="text-md sm:text-lg font-bold text-black dark:text-white mr-2">$249.99</span>
<span class="text-sm text-gray-500 dark:text-gray-400">x 2</span>
</div>
</div>
<button aria-label="Remove item" class="ml-auto text-gray-400 hover:text-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 rounded-full p-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Cart Item -->
<div class="flex items-center bg-white dark:bg-gray-900 rounded-lg p-3 sm:p-4 mb-4 shadow border border-gray-200 dark:border-gray-700">
<div class="flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden relative">
<img src="https://picsum.photos/id/111/80/80" alt="Industrial Part 2" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-rose-500 opacity-20"></div>
</div>
<div class="ml-4 flex-grow">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-50 mb-1 leading-tight">Heavy-Duty Gearbox</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Part #XYZ-98765</p>
<div class="flex items-center mt-2">
<span class="text-md sm:text-lg font-bold text-black dark:text-white mr-2">$1250.00</span>
<span class="text-sm text-gray-500 dark:text-gray-400">x 1</span>
</div>
</div>
<button aria-label="Remove item" class="ml-auto text-gray-400 hover:text-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 rounded-full p-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Totals Summary -->
<div class="border-t-2 border-dashed border-gray-300 dark:border-gray-700 pt-4 mt-6">
<div class="flex justify-between items-center mb-2">
<span class="text-md text-gray-700 dark:text-gray-300 uppercase tracking-wide">Subtotal</span>
<span class="text-lg font-semibold text-black dark:text-white">$1749.98</span>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-md text-gray-700 dark:text-gray-300 uppercase tracking-wide">Taxes & Fees (Est.)</span>
<span class="text-lg font-semibold text-black dark:text-white">$0.00</span>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase tracking-wide">Estimated Total</span>
<span class="text-xl sm:text-2xl font-extrabold text-rose-500 dark:text-rose-400">$1749.98</span>
</div>
</div>
<button class="w-full bg-black dark:bg-white text-white dark:text-black py-3 px-6 rounded-lg text-lg font-semibold uppercase tracking-wider transition-all duration-300 ease-in-out hover:bg-rose-500 hover:text-white dark:hover:bg-rose-500 dark:hover:text-white focus:outline-none focus:ring-4 focus:ring-rose-500 dark:focus:ring-rose-400 focus:ring-opacity-50 mt-6 shadow-lg">
Proceed to Inquiry
</button>
<p class="text-xs text-gray-500 dark:text-gray-400 text-center mt-4">
Prices are estimates for industrial clients. Final pricing subject to quote.
</p>
</div>
</div>
</div>Composants associés
Composant de panier d’achat
Composant de panier d’achat skeuomorphe avec palette de couleurs pastel, prise en charge du mode réactif et sombre.
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 conçu en 3D avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.