Brutalist_ProgressBar

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-zinc-900 min-h-screen flex items-center justify-center font-mono">
  <div class="w-full max-w-xl border-4 border-black dark:border-white shadow-xl dark:shadow-none bg-white dark:bg-black p-4 sm:p-6 md:p-8 relative overflow-hidden">
    
    <!-- Top-left overlay 'GLITCH' effect -->
    <div class="absolute -top-2 -left-2 text-6xl md:text-8xl font-black text-red-500 opacity-20 transform -rotate-12 select-none pointer-events-none z-0 hidden sm:block">
      GLITCH
    </div>

    <h2 class="text-2xl sm:text-3xl md:text-4xl font-black text-black dark:text-white mb-6 uppercase tracking-tighter relative z-10">
      Order Progress <span class="text-red-600 dark:text-yellow-400">STATUS</span>
    </h2>

    <div class="mb-8 relative z-10">
      <p class="text-lg sm:text-xl font-bold text-black dark:text-white mb-2 uppercase">
        Shipment: <span class="text-red-600 dark:text-yellow-400">75%</span> Complete
      </p>
      <div class="w-full h-8 sm:h-10 bg-gray-300 dark:bg-zinc-700 border-4 border-black dark:border-white relative overflow-hidden">
        <!-- Progress bar fill -->
        <div class="h-full bg-red-600 dark:bg-yellow-400" style="width: 75%;">
          <div class="absolute inset-0 bg-gradient-to-r from-transparent via-black/10 dark:via-white/10 to-transparent animate-pulse"></div>
        </div>

        <!-- Glitch line effect - CSS animated, but here as classes with high contrast -->
        <div class="absolute inset-0 border-x-4 border-red-800 dark:border-yellow-600 opacity-25 animate-glitch-line-1" style="animation-duration: 2s;"></div>
        <div class="absolute inset-0 border-x-4 border-black dark:border-white opacity-25 animate-glitch-line-2" style="animation-duration: 3s;"></div>
      </div>
      <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 mt-2 font-bold">Next step: Packaging (Expected today)</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 relative z-10">
      <div class="p-4 border-4 border-black dark:border-white dark:bg-zinc-800 bg-gray-200">
        <h3 class="text-xl font-bold text-black dark:text-white mb-2 uppercase">Vendor A</h3>
        <div class="w-full h-6 bg-gray-300 dark:bg-zinc-700 border-2 border-black dark:border-white relative">
          <div class="h-full bg-blue-600 dark:bg-green-400" style="width: 90%;"></div>
        </div>
        <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">Items Shipped: 90%</p>
      </div>

      <div class="p-4 border-4 border-black dark:border-white dark:bg-zinc-800 bg-gray-200">
        <h3 class="text-xl font-bold text-black dark:text-white mb-2 uppercase">Vendor B</h3>
        <div class="w-full h-6 bg-gray-300 dark:bg-zinc-700 border-2 border-black dark:border-white relative">
          <div class="h-full bg-purple-600 dark:bg-cyan-400" style="width: 40%;"></div>
        </div>
        <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">Items Shipped: 40%</p>
      </div>
    </div>

    <!-- Bottom-right overlay 'VOID' effect -->
    <div class="absolute -bottom-2 -right-2 text-6xl md:text-8xl font-black text-black dark:text-gray-700 opacity-10 transform rotate-12 select-none pointer-events-none z-0 hidden sm:block">
      VOID
    </div>

  </div>

  <style>
    /* Basic keyframes for the glitch lines, adjust values for more or less chaos */
    @keyframes glitch-line-1 {
      0%, 100% { transform: translateY(0); opacity: 0.25; }
      20% { transform: translateY(5px); opacity: 0.5; }
      40% { transform: translateY(-5px); opacity: 0.1; }
      60% { transform: translateY(3px); opacity: 0.4; }
      80% { transform: translateY(-3px); opacity: 0.2; }
    }

    @keyframes glitch-line-2 {
      0%, 100% { transform: translateY(0); opacity: 0.25; }
      15% { transform: translateY(-7px); opacity: 0.3; }
      35% { transform: translateY(7px); opacity: 0.15; }
      55% { transform: translateY(-2px); opacity: 0.4; }
      75% { transform: translateY(4px); opacity: 0.2; }
    }

    .animate-glitch-line-1 { animation: glitch-line-1 2.5s infinite step-end; }
    .animate-glitch-line-2 { animation: glitch-line-2 3s infinite step-end; }
  </style>
</div>