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.
HTML Code
<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4 dark:bg-gray-900 font-mono">
<div class="w-full max-w-6xl bg-white border-4 border-blue-800 shadow-lg p-6 rounded-lg relative overflow-hidden dark:bg-gray-800 dark:border-blue-500">
<!-- Retro Header Bar -->
<div class="absolute top-0 left-0 right-0 h-8 bg-blue-700 flex items-center justify-between px-4 text-white text-sm font-bold border-b-2 border-blue-900 dark:bg-blue-600 dark:border-blue-800">
<span class="tracking-wider">SYSTEM CART V1.9.89Beta</span>
<div class="flex space-x-2">
<span>[FILE]</span>
<span>[EDIT]</span>
<span>[VIEW]</span>
<span>[HELP]</span>
</div>
</div>
<div class="pt-10 pb-4">
<!-- Main Content Area -->
<div class="flex flex-col lg:flex-row gap-6">
<!-- Cart Items Section -->
<div class="lg:w-2/3 bg-gray-50 border-2 border-blue-600 p-4 rounded-md shadow-inner dark:bg-gray-700 dark:border-blue-400">
<h2 class="text-2xl font-bold text-blue-800 mb-6 border-b-2 border-blue-400 pb-2 dark:text-blue-300 dark:border-blue-600">\> INVENTORY SELECTION: ACTIVE</h2>
<!-- Cart Item 1 -->
<div class="flex flex-col sm:flex-row items-center bg-white p-4 mb-4 rounded-md shadow-sm border border-blue-200 dark:bg-gray-800 dark:border-blue-700">
<img src="https://picsum.photos/seed/tool1/120/120" alt="Industrial Robot Arm" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-sm mr-4 mb-4 sm:mb-0 border border-blue-300 dark:border-blue-600">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Z-900 Automated Assembly Arm</h3>
<p class="text-gray-600 text-sm mb-2 dark:text-gray-400">SKU: IND-RA9001 | Lot: 01-2023</p>
<div class="flex items-center space-x-4">
<div class="flex items-center border border-gray-300 rounded overflow-hidden dark:border-gray-600">
<button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">-</button>
<input type="text" value="2" class="w-12 text-center border-l border-r border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" readonly>
<button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">+</button>
</div>
<p class="text-lg font-bold text-green-700 dark:text-green-400">$49,999.00</p>
</div>
</div>
<button class="ml-0 sm:ml-4 mt-4 sm:mt-0 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:bg-red-700 dark:hover:bg-red-800">REMOVE</button>
</div>
<!-- Cart Item 2 -->
<div class="flex flex-col sm:flex-row items-center bg-white p-4 mb-4 rounded-md shadow-sm border border-blue-200 dark:bg-gray-800 dark:border-blue-700">
<img src="https://picsum.photos/seed/gearbox/120/120" alt="Precision Gearbox" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-sm mr-4 mb-4 sm:mb-0 border border-blue-300 dark:border-blue-600">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">HD Precision Gearbox (Model M8)</h3>
<p class="text-gray-600 text-sm mb-2 dark:text-gray-400">SKU: PART-GBM800 | Lot: 03-2024</p>
<div class="flex items-center space-x-4">
<div class="flex items-center border border-gray-300 rounded overflow-hidden dark:border-gray-600">
<button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">-</button>
<input type="text" value="5" class="w-12 text-center border-l border-r border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" readonly>
<button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">+</button>
</div>
<p class="text-lg font-bold text-green-700 dark:text-green-400">$1,250.00</p>
</div>
</div>
<button class="ml-0 sm:ml-4 mt-4 sm:mt-0 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:bg-red-700 dark:hover:bg-red-800">REMOVE</button>
</div>
<div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
<button class="px-6 py-2 bg-blue-200 border-2 border-blue-400 text-blue-800 hover:bg-blue-300 rounded-md shadow-md dark:bg-blue-800 dark:border-blue-600 dark:text-blue-200 dark:hover:bg-blue-700">
\u003c\u003c ADD MORE ITEMS
</button>
<button class="text-red-600 hover:underline">
CLEAR ALL ITEMS
</button>
</div>
</div>
<!-- Order Summary Section -->
<div class="lg:w-1/3 bg-gray-50 border-2 border-blue-600 p-4 rounded-md shadow-inner dark:bg-gray-700 dark:border-blue-400">
<h2 class="text-2xl font-bold text-blue-800 mb-6 border-b-2 border-blue-400 pb-2 dark:text-blue-300 dark:border-blue-600">\> ORDER LOG: SUMMARY</h2>
<div class="mb-4">
<div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
<span class="text-gray-700 dark:text-gray-300">Item Subtotal:</span>
<span class="font-bold text-gray-900 dark:text-gray-100">$101,248.00</span>
</div>
<div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
<span class="text-gray-700 dark:text-gray-300">Shipping (Freight):</span>
<span class="font-bold text-gray-900 dark:text-gray-100">$750.00</span>
</div>
<div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
<span class="text-gray-700 dark:text-gray-300">Estimated Tax (7.5%):</span>
<span class="font-bold text-gray-900 dark:text-gray-100">$7,650.00</span>
</div>
<div class="flex justify-between py-2">
<span class="text-lg font-bold text-blue-800 dark:text-blue-300">TOTAL DUE:</span>
<span class="text-2xl font-extrabold text-blue-900 dark:text-blue-100">$109,648.00</span>
</div>
</div>
<div class="mb-6">
<label for="promo" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-300">PROMO CODE / ACCOUNT ID:</label>
<div class="flex">
<input type="text" id="promo" class="flex-grow px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600" placeholder="Enter code">
<button class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-700 dark:hover:bg-blue-600">
APPLY
</button>
</div>
</div>
<p class="text-gray-600 text-xs mb-4 dark:text-gray-400">
<strong class="text-yellow-600 dark:text-yellow-400">\u003e\u003e SYSTEM MESSAGE:</strong> All orders are subject to final review and confirmation. Lead times may vary based on component availability. For bulk discounts, contact sales.
</p>
<button class="w-full bg-blue-800 text-white font-bold py-3 mt-4 rounded-md shadow-lg hover:bg-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-offset-2 transition duration-300 ease-in-out dark:bg-blue-600 dark:hover:bg-blue-500">
\u003c\u003c INITIATE CHECKOUT PROTOCOL \u003e\u003e
</button>
</div>
</div>
</div>
<!-- Retro Footer Bar -->
<div class="absolute bottom-0 left-0 right-0 h-8 bg-blue-700 flex items-center justify-between px-4 text-white text-sm font-bold border-t-2 border-blue-900 dark:bg-blue-600 dark:border-blue-800">
<span class="tracking-wider">STATUS: READY | USER: JDOE89 | SESSION: ACTIVE</span>
<div class="flex space-x-4">
<span>[F1-Help]</span>
<span>[F5-Refresh]</span>
<span>[F12-Exit]</span>
</div>
</div>
</div>
</div>Composants associés
Composant de panier d’achat
Un composant de panier d’achat réactif conçu dans le style Neumorphism à l’aide de Tailwind CSS, adapté aux interfaces de médias sociaux avec prise en charge du thème sombre.
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.
Composant de panier d’achat
Un composant de panier d’achat avec un design Skeuomorphism, des effets réactifs et la prise en charge du thème sombre.