다크 모드 프로그레스 바(Dark Mode Progress Bar)
Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소로, 세련된 디자인과 어두운 테마 지원을 특징으로 합니다.
HTML 코드
<div class="bg-gray-800 rounded-lg p-4 w-full">
<h3 class="text-white text-lg font-semibold mb-2">Progress Bar</h3>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div>
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
70%
</span>
</div>
<div class="text-right">
<span class="text-xs font-semibold inline-block text-teal-600">
Completed
</span>
</div>
</div>
<div class="flex h-2 mb-4 rounded bg-gray-700">
<div class="w-7/12 h-full bg-teal-600 rounded"></div>
</div>
</div>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600 mr-2">
<span class="text-white text-sm">John Doe</span>
</div>
</div>