CCHub Logo CCHub Tailwind Collection
구성 요소 진행률 표시줄 Progress Bar 구성 요소

Progress Bar 구성 요소

머티리얼 디자인 스타일로 디자인된 반응형 진행률 표시줄 구성 요소로, 포트폴리오 쇼케이스를 위한 파스텔 색 구성표를 통합합니다. 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-2 text-gray-700 dark:text-gray-200">Project Progress</h2>
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full">
        <div class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 h-4 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between w-full mt-2 text-xs text-gray-600 dark:text-gray-400">
        <span>0%</span>
        <span>70%</span>
        <span>100%</span>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/100/100" alt="Project Screenshot" class="rounded-lg shadow-md"> 
    </div>
    <div class="mt-2 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
        <span class="text-gray-700 dark:text-gray-200">Reviewed by John Doe</span>
    </div>
</div>

관련 구성 요소

사이버펑크 네오 레트로 프로그레스 바(Cyberpunk Neo-Retro Progress Bar)

사이버펑크, 네오 레트로 미학, 어두운 배경 및 차분한 빈티지 강조 색상이 있는 중간 복잡성의 진행률 표시줄 구성 요소로, 엔터테인먼트/미디어 플랫폼용으로 설계되었습니다. 세그먼트화된 진행 상황 표시가 특징이며 다크 모드 지원으로 완벽하게 반응합니다.

열다

뉴모픽 프로그레스 바

뉴모피즘(Neumorphism) 스타일로 디자인된 반응형 프로그레스 바 컴포넌트로, Tailwind CSS를 사용하여 밝은 테마와 어두운 테마를 모두 지원합니다.

열다

Skeuomorphic_Monochromatic_Progress_Bar

전자 상거래를 위한 중간 복잡성의 스큐어모픽 진행률 표시줄 구성 요소로, 단색 색 구성표, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다.

열다