전자 상거래 Professional Progress Bar

<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>