Progress Indicators 구성 요소
글래스모피즘 스타일의 반응형 Progress Indicators 구성 요소로, 젖빛 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<div class="bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Progress Indicators</h2>
<div class="w-full mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Task 1</span>
<span class="text-sm text-gray-700 dark:text-gray-300">75%</span>
</div>
<div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
</div>
</div>
<div class="w-full mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Task 2</span>
<span class="text-sm text-gray-700 dark:text-gray-300">50%</span>
</div>
<div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
</div>
</div>
<div class="w-full mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Task 3</span>
<span class="text-sm text-gray-700 dark:text-gray-300">25%</span>
</div>
<div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-red-600 h-2.5 rounded-full" style="width: 25%"></div>
</div>
</div>
<div class="flex items-center justify-between mt-4">
<img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full">
</div>
</div>
</div>관련 구성 요소
Progress Indicators 구성 요소
유리 형태 효과로 설계된 간단한 진행률 표시기로, 다크 모드를 지원하고 단색 색 구성표가 있는 전자 상거래 웹 사이트에 적합합니다.
Progress Indicators 구성 요소
브루탈리즘 스타일의 진행 지표 구성 요소로, 고대비를 가지고 있으며, 포트폴리오에서 작업이나 제품을 보여줍니다. Tailwind CSS를 사용하여 어두운 테마 지원으로 반응하도록 설계된 여러 대화형 요소가 있는 풍부한 인터페이스를 제공합니다.