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

3D 효과, Tailwind CSS, 반응형 디자인 및 다크 모드 지원으로 스타일링되었습니다.

미리 보기

HTML 코드

<div class='relative pt-1 dark:bg-gray-800'>
  <div class='overflow-hidden h-2 text-xs flex rounded bg-gray-200 dark:bg-gray-700'>
    <div style='width: 45%' class='shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 dark:bg-blue-400'></div>
  </div>
  <div class='mt-2 text-right text-xs dark:text-gray-400'>45% Complete</div>
</div>

관련 구성 요소

Progress Indicators 구성 요소

블로그 콘텐츠 소비를 위한 회색조 색 구성표가 있는 3D 디자인 스타일 진행률 표시기 구성 요소로, 반응형 디자인 및 다크 모드 지원을 제공합니다.

열다

Progress Indicators 구성 요소

글래스모피즘 스타일의 반응형 Progress Indicators 구성 요소로, 젖빛 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다

브루탈리스트그레이스케일프로그레시브 바

블로그 콘텐츠를 위한 브루탈리즘 스타일의 그레이스케일 진행률 표시줄로, 심플한 디자인, 다크 모드 지원 및 응답성을 제공합니다.

열다