进度指示器组件
具有高对比度的粗野派风格进度指示器组件，用于展示作品集中的工作或产品。它具有具有多个交互式元素的丰富界面，旨在使用 Tailwind CSS 响应深色主题支持。
HTML 代码
<div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-8 space-y-8">
<h1 class="text-4xl font-bold mb-4 text-gray-100">Portfolio Progress Indicators</h1>
<div class="bg-gray-800 rounded-lg w-full max-w-xl p-6 shadow-lg space-y-6">
<h2 class="text-2xl font-bold text-gray-200">Current Projects</h2>
<div class="space-y-4">
<div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Project 1" class="rounded-full">
<span class="text-lg font-semibold">Project Alpha</span>
</div>
<div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
<div class="absolute top-0 left-0 h-4 bg-green-500" style="width: 60%;"></div>
</div>
</div>
<div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Project 2" class="rounded-full">
<span class="text-lg font-semibold">Project Beta</span>
</div>
<div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
<div class="absolute top-0 left-0 h-4 bg-yellow-500" style="width: 40%;"></div>
</div>
</div>
<div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Project 3" class="rounded-full">
<span class="text-lg font-semibold">Project Gamma</span>
</div>
<div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
<div class="absolute top-0 left-0 h-4 bg-red-500" style="width: 80%;"></div>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg w-full max-w-xl p-6 shadow-lg">
<h2 class="text-2xl font-bold text-gray-200">Completed Projects</h2>
<div class="space-y-4">
<div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Project 4" class="rounded-full">
<span class="text-lg font-semibold">Project Delta</span>
</div>
<div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
<div class="absolute top-0 left-0 h-4 bg-blue-500" style="width: 100%;"></div>
</div>
</div>
<div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Project 5" class="rounded-full">
<span class="text-lg font-semibold">Project Epsilon</span>
</div>
<div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
<div class="absolute top-0 left-0 h-4 bg-purple-500" style="width: 90%;"></div>
</div>
</div>
</div>
</div>
</div>