뉴모픽 프로그레스 바

뉴모피즘(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 구성 요소

최신 웹 애플리케이션에 적합한 Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소입니다.

열다

Progress Bar 구성 요소

glassmorphism 및 단색 색상으로 스타일링된 간단한 진행률 표시줄 구성 요소로, 비즈니스 및 기업 웹 사이트에 적합하며 다크 모드를 지원합니다.

열다

3D 프로그레스 바 컴포넌트

소셜 네트워킹 인터페이스용으로 설계된 반응형 진행률 표시줄 구성 요소로, Tailwind CSS를 사용하여 구축된 3D 효과, 단색 색 구성표 및 다크 모드 지원을 특징으로 합니다.

열다