CCHub Tailwind Collection

구성 요소 진행률 표시줄 뉴모픽 프로그레스 바

뉴모픽 프로그레스 바

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

미리 보기

HTML 코드

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="w-64 bg-gray-200 dark:bg-gray-900 rounded-full shadow-lg p-1">
        <div class="bg-gradient-to-r from-blue-500 to-blue-700 h-4 rounded-full" style="width: 70%;"></div>
    </div>
    <span class="mt-2 text-gray-700 dark:text-gray-300">70%</span>
</div>

관련 구성 요소

Progress Bar 구성 요소

파스텔 색상 구성표가 있는 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소로, 비즈니스/기업 웹 사이트에 적합합니다.

열다

다크 모드 프로그레스 바(Dark Mode Progress Bar)

Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소로, 세련된 디자인과 어두운 테마 지원을 특징으로 합니다.

열다

Progress Bar 구성 요소

Tailwind CSS를 사용하여 다크 모드를 염두에 두고 설계된 반응형 진행률 표시줄 구성 요소입니다.

열다