CCHub Logo CCHub Tailwind Collection
구성 요소 진행 표시기 Progress Indicators 구성 요소

Progress Indicators 구성 요소

80년대와 90년대의 레트로/빈티지 미학에서 영감을 받은 간단한 Progress Indicators 구성 요소로, 보색체를 사용합니다. 소셜 미디어 인터페이스용으로 설계되었으며 어두운 테마 지원으로 반응합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4">Progress Indicators</h2>
    <div class="w-full bg-gray-700 dark:bg-gray-600 rounded-lg">
        <div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-lg" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between w-full text-sm mt-2 text-gray-300 dark:text-gray-200">
        <span>0%</span>
        <span>70%</span>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
        <div class="ml-3">
            <p class="text-md text-white">User Name</p>
            <p class="text-sm text-gray-400 dark:text-gray-500">Status: Active</p>
        </div>
    </div>
    <p class="text-gray-500 dark:text-gray-400 mt-2 text-center">Loading data...</p>
    <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md">
</div>

관련 구성 요소

Progress Indicators 구성 요소

glassmorphism 스타일, 반응형 디자인 및 어두운 테마를 지원하는 진행률 표시기 구성 요소입니다. 스타일링에 Tailwind CSS를 사용합니다.

열다

Progress Indicators 구성 요소

브루탈리즘 스타일의 진행 지표 구성 요소로, 고대비를 가지고 있으며, 포트폴리오에서 작업이나 제품을 보여줍니다. Tailwind CSS를 사용하여 어두운 테마 지원으로 반응하도록 설계된 여러 대화형 요소가 있는 풍부한 인터페이스를 제공합니다.

열다

Progress Indicators 구성 요소

이것은 반응형 효과와 어두운 테마를 지원하는 Tailwind CSS를 사용하는 Material Design 스타일의 진행률 표시기 구성 요소입니다.

열다