Skeuomorpher Fortschrittsbalken

<div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-md bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-xl shadow-2xl-inner relative">
    <div class="absolute inset-0 border-4 border-gray-400 dark:border-gray-600 rounded-xl pointer-events-none"></div>
    <div class="text-center mb-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Project Progress</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Portfolio Showcase</p>
    </div>

    <div class="mb-8 relative">
      <div class="h-8 bg-gray-400 dark:bg-gray-600 rounded-full shadow-inner-lg overflow-hidden relative">
        <div class="absolute inset-y-0 left-0 w-3/4 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full shadow-lg transition-all duration-500 ease-out flex items-center justify-end pr-3"
             style="width: 75%;">
          <span class="text-white text-sm font-bold drop-shadow-md">75%</span>
        </div>
        <div class="absolute top-1/2 left-3/4 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-white dark:bg-gray-200 rounded-full shadow-md border-2 border-blue-500 dark:border-blue-700"></div>
      </div>
      <div class="text-gray-700 dark:text-gray-300 text-right mt-2 text-sm">Completed</div>
    </div>

    <div class="grid grid-cols-2 gap-4 text-sm">
      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Design Phase</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">90%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>

      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Development</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">70%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>

      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Testing</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">50%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>
    </div>

    <div class="mt-8 text-center">
      <button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-6 rounded-full 
                     shadow-lg hover:shadow-xl active:shadow-inner-lg transition-all duration-200
                     dark:bg-blue-700 dark:hover:bg-blue-800 dark:active:bg-blue-900">
        View Details
      </button>
    </div>
  </div>
</div>

<style>
  /* Custom Utility Classes for Skeuomorphism */
  .shadow-2xl-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-2xl-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
  }

  .shadow-inner-lg {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
  }

  .drop-shadow-md {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
  }
</style>