다크 모드 프로그레스 바(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>관련 구성 요소
Progress Bar 구성 요소
머티리얼 디자인 스타일로 디자인된 반응형 진행률 표시줄 구성 요소로, 포트폴리오 쇼케이스를 위한 파스텔 색 구성표를 통합합니다. 다크 모드를 지원합니다.
전자 상거래 Professional Progress Bar
전자 상거래를 위해 설계된 복잡하고 반응이 빠른 진행률 표시줄 구성 요소로, 가을 색 구성표(진한 주황색, 갈색, 부르고뉴)를 특징으로 하고 다크 모드를 지원합니다. 기업 환경에 깨끗하고 전문적인 모습을 제공합니다.