Barra di avanzamento professionale per l'e-commerce
Un componente della barra di avanzamento complesso e reattivo progettato per l'e-commerce, con una combinazione di colori autunnali (arancioni, marroni, bordeaux) e che supporta la modalità scura. Fornisce un aspetto pulito e professionale per gli ambienti aziendali.
Codice HTML
<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>Componenti correlati
Componente della barra di avanzamento
Un componente della barra di avanzamento reattivo progettato per la modalità oscura utilizzando Tailwind CSS, adatto per le moderne applicazioni web.
Componente Barra di avanzamento 3D
Un componente della barra di avanzamento reattivo progettato per le interfacce di social networking, con un effetto 3D, una combinazione di colori monocromatica e il supporto della modalità scura, creato utilizzando Tailwind CSS.
Componente della barra di avanzamento
Un componente della barra di avanzamento semplice e reattivo con influenze Material Design, che utilizza toni caldi del tramonto. Ideale per applicazioni tecnologiche/SaaS, con supporto per la modalità scura.