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

Progress Indicators 구성 요소

유리 형태 효과로 설계된 간단한 진행률 표시기로, 다크 모드를 지원하고 단색 색 구성표가 있는 전자 상거래 웹 사이트에 적합합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-5 bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg">
    <h1 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Order Progress</h1>
    <div class="w-full mx-auto">
        <!-- Progress Bar -->
        <div class="relative pt-1">
            <div class="flex mb-2 items-center justify-between">
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    1. Add to Cart
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    2. Checkout
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    3. Payment
                </div>
            </div>
            <div class="flex h-2 mb-4 rounded bg-gray-300 dark:bg-gray-600">
                <div class="w-1/3 h-full bg-blue-600 dark:bg-blue-300"></div>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
    </div>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Estimated delivery: 3-5 business days</p>
</div>

관련 구성 요소

Progress Indicators 구성 요소

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

열다

Progress Indicators 구성 요소

소셜 미디어 애플리케이션을 위한 glassmorphism 스타일의 진행률 표시기 구성 요소로, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다. 유사한 색 구성표를 사용하며 여러 대화형 요소가 있는 복잡하고 풍부한 인터페이스를 제공합니다. 구성 요소는 반응형이며 Tailwind CSS에서 어두운 테마를 지원합니다.

열다

Memphis_Gaming_Progress_Indicators

게임을 위한 복잡하고 반응이 빠른 진행 상태 표시기 구성 요소로, 일몰 색 구성표가 있는 Memphis Design에서 영감을 받았습니다. 여러 진행률 표시줄, 레벨 표시 및 대화형 요소가 있으며 다크 모드를 지원합니다.

열다