Barre de progression professionnelle du commerce électronique
Il s’agit d’un composant complexe et réactif de la barre de progression conçu pour le commerce électronique, avec une palette de couleurs automnales (oranges riches, bruns, bordeaux) et prenant en charge le mode sombre. Il offre un aspect épuré et professionnel pour les environnements d’entreprise.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 sm:p-8 md:p-10 rounded-lg shadow-xl max-w-4xl mx-auto font-sans text-gray-800 dark:text-gray-200 transition-colors duration-300">
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">Your Order Progress</h2>
<div class="flex justify-between items-center mb-4 text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300">
<span>Order ID: <span class="font-medium text-gray-900 dark:text-white">#CUST-2023-98765</span></span>
<span>Estimated Delivery: <span class="font-medium text-gray-900 dark:text-white">Oct 26, 2023</span></span>
</div>
<nav class="flex items-center justify-between relative mb-8">
<div class="absolute left-0 top-1/2 -mt-0.5 w-full h-1 bg-gray-200 dark:bg-gray-700 rounded-full z-0"></div>
<div class="absolute left-0 top-1/2 -mt-0.5 w-3/4 rounded-full h-1 bg-orange-700 dark:bg-orange-600 transition-all duration-700 ease-out z-10"></div>
<ol class="flex justify-between w-full relative z-20">
<li class="flex flex-col items-center flex-1 min-w-0 pr-2">
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-orange-700 dark:bg-orange-600 text-white font-bold text-lg mb-2 sm:mb-3 shadow-md border-2 border-orange-800 dark:border-orange-700">
1
</div>
<span class="text-center text-xs sm:text-sm font-medium text-gray-900 dark:text-white leading-tight">Order Placed</span>
</li>
<li class="flex flex-col items-center flex-1 min-w-0 px-1">
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-orange-700 dark:bg-orange-600 text-white font-bold text-lg mb-2 sm:mb-3 shadow-md border-2 border-orange-800 dark:border-orange-700">
2
</div>
<span class="text-center text-xs sm:text-sm font-medium text-ellipsis overflow-hidden whitespace-nowrap">Processing</span>
</li>
<li class="flex flex-col items-center flex-1 min-w-0 px-1">
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-orange-700 dark:bg-orange-600 text-white font-bold text-lg mb-2 sm:mb-3 shadow-md border-2 border-orange-800 dark:border-orange-700">
3
</div>
<span class="text-center text-xs sm:text-sm font-medium text-ellipsis overflow-hidden whitespace-nowrap">Shipped</span>
</li>
<li class="flex flex-col items-center flex-1 min-w-0 pl-2">
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 font-bold text-lg mb-2 sm:mb-3 border-2 border-gray-400 dark:border-gray-500">
4
</div>
<span class="text-center text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400 leading-tight">Out for Delivery</span>
</li>
<li class="flex flex-col items-center flex-1 min-w-0 pl-2">
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 font-bold text-lg mb-2 sm:mb-3 border-2 border-gray-400 dark:border-gray-500">
5
</div>
<span class="text-center text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400 leading-tight">Delivered</span>
</li>
</ol>
</nav>
<div class="bg-orange-50 dark:bg-gray-700 p-4 sm:p-5 rounded-lg border border-orange-200 dark:border-gray-600 flex flex-col sm:flex-row items-start sm:items-center justify-between transition-colors duration-300">
<div class="flex items-start sm:items-center mb-3 sm:mb-0">
<img class="w-12 h-12 sm:w-16 sm:h-16 rounded-lg mr-4 object-cover border border-orange-300 dark:border-gray-500" src="https://picsum.photos/100/100?random=1" alt="Product Image">
<div>
<p class="font-semibold text-base sm:text-lg text-brown-900 dark:text-white mb-0.5">Autumn Comfort Scarf</p>
<p class="text-sm text-gray-700 dark:text-gray-300">Qty: 1 | Color: Burgundy</p>
<p class="text-sm font-bold text-orange-800 dark:text-orange-400">$29.99</p>
</div>
</div>
<div class="text-right sm:text-left">
<p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Current Status:</p>
<p class="text-base font-bold text-orange-700 dark:text-orange-500">Shipped</p>
<p class="text-xs text-gray-600 dark:text-gray-400">Last updated: Oct 24, 2023, 10:30 AM PST</p>
</div>
</div>
<div class="mt-8 text-center">
<button class="bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold py-2 px-6 rounded-full inline-flex items-center transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
View Order Details
</button>
</div>
</div>Composants associés
Composant de la barre de progression 3D
Un composant de barre de progression réactif conçu pour les interfaces de réseaux sociaux, avec un effet 3D, une palette de couleurs monochromatiques et la prise en charge du mode sombre, construit à l’aide de Tailwind CSS.
Barre de progression
Un composant de barre de progression réactif avec prise en charge du mode sombre pour le commerce électronique, avec une palette de couleurs vives et une mise en page simple.
Organic_Nature_ProgressBar
Un composant de barre de progression à thème rétro inspiré de la nature pour les applications industrielles et manufacturières, avec des lignes fluides, des couleurs sourdes et la prise en charge du mode sombre.