Skeuomorphic_Monochromatic_Progress_Bar

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg bg-gray-200 dark:bg-gray-800 rounded-xl p-6 shadow-2xl transition-colors duration-300 transform
              relative
              before:content-[''] before:absolute before:inset-0 before:rounded-xl before:bg-gradient-to-br before:from-gray-300 before:via-gray-200 before:to-gray-100 dark:before:from-gray-900 dark:before:via-gray-800 dark:before:to-gray-700 before:opacity-0 before:transition-opacity before:duration-300
              hover:before:opacity-100">

    <div class="relative z-10">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4 text-center tracking-tight">
        Order Processing
      </h2>

      <div class="mb-8">
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center mb-2">
          50% Completed - Your order is being prepared.
        </p>

        <div class="relative h-6 sm:h-8 rounded-full bg-gray-300 dark:bg-gray-700 shadow-inner overflow-hidden border border-gray-400 dark:border-gray-600
                    before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-gray-400 before:to-gray-500 dark:before:from-gray-800 dark:before:to-gray-900 before:opacity-50">

          <div class="absolute top-0 left-0 h-full w-1/2 rounded-full bg-blue-600 transition-all duration-700 ease-out
                      shadow-lg
                      before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-t before:from-blue-700 before:to-blue-500 before:opacity-80
                      after:content-[''] after:absolute after:inset-y-0 after:right-0 after:w-1/4 after:bg-white after:opacity-20 after:blur-sm after:rounded-r-full">
            <div class="h-full flex items-center justify-end pr-2 text-xs sm:text-sm font-semibold text-white tracking-wider animate-pulse-text">
              50%
            </div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-3 gap-4">
        <!-- Step 1 -->
        <div class="flex flex-col items-center">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-blue-600 dark:bg-blue-700 flex items-center justify-center text-white text-lg sm:text-xl font-bold mb-2 shadow-md transition-all duration-300
                      relative
                      before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-blue-700 before:to-blue-500 before:opacity-70
                      after:content-[''] after:absolute after:inset-0 after:rounded-full after:bg-white after:opacity-10 after:scale-90">
            ✓
          </div>
          <p class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 text-center font-medium">Confirmed</p>
        </div>

        <!-- Step 2 -->
        <div class="flex flex-col items-center">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-blue-500 dark:bg-blue-600 flex items-center justify-center text-white text-lg sm:text-xl font-bold mb-2 shadow-inner transition-all duration-300
                      relative
                      before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-blue-600 before:to-blue-400 before:opacity-70
                      after:content-[''] after:absolute after:inset-0 after:rounded-full after:bg-white after:opacity-10 after:scale-90">
            2
          </div>
          <p class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 text-center font-medium">Processing</p>
        </div>

        <!-- Step 3 -->
        <div class="flex flex-col items-center">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-gray-400 dark:bg-gray-600 flex items-center justify-center
                      text-gray-600 dark:text-gray-400 text-lg sm:text-xl font-bold mb-2 shadow-inner transition-all duration-300
                      relative
                      before:content-[''] before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-gray-500 before:to-gray-300 dark:before:from-gray-700 dark:before:to-gray-500 before:opacity-70
                      after:content-[''] after:absolute after:inset-0 after:rounded-full after:bg-gray-200 dark:after:bg-gray-800 after:opacity-20 after:scale-90">
            3
          </div>
          <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 text-center">Shipped</p>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  /* This is just for demonstration if you want a subtle animation effect. */
  /* Tailwind does not have built-in keyframe animation utilities for complex animations without custom config. */
  /* For a pure Tailwind solution, you'd define these in tailwind.config.js */
  @keyframes pulseText {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
  .animate-pulse-text {
    animation: pulseText 2s ease-in-out infinite;
  }
</style>