Progress Indicators 구성 요소
브루탈리즘 스타일의 진행 지표 구성 요소로, 고대비를 가지고 있으며, 포트폴리오에서 작업이나 제품을 보여줍니다. 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>