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

Progress Indicators 구성 요소

따뜻한 일몰 톤의 간단하고 깨끗하며 전문적인 진행 표시기 구성 요소로 비즈니스 및 컨설팅 서비스에 적합하며 반응형 디자인과 다크 모드 지원을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="font-sans bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center mb-10">
      Our Consulting Process
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Step 1 -->
      <div class="relative flex flex-col items-center group">
        <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-yellow-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-yellow-600 shadow-lg">
          1
          <div class="absolute -right-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-yellow-400 transform -translate-y-1/2 hidden md:block"></div>
          <div class="absolute -right-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-yellow-400 transform -translate-y-1/2 hidden lg:hidden md:block"></div>
        </div>
        <div class="text-center mt-4 w-full md:w-auto">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Initial Consultation</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Understanding your needs and goals to tailor our approach.</p>
        </div>
        <div class="absolute top-16 md:hidden w-1 h-8 bg-yellow-500 dark:bg-yellow-400"></div>
      </div>

      <!-- Step 2 -->
      <div class="relative flex flex-col items-center group">
        <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-orange-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-orange-600 shadow-lg">
          2
          <div class="absolute -left-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-orange-400 transform -translate-y-1/2 hidden md:block"></div>
          <div class="absolute -right-2 top-1/2 w-4 h-1 bg-orange-500 dark:bg-orange-400 transform -translate-y-1/2 hidden md:block"></div>
        </div>
        <div class="text-center mt-4 w-full md:w-auto">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Strategy & Planning</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Developing a custom strategy roadmap and detailed action plans.</p>
        </div>
        <div class="absolute top-16 md:hidden w-1 h-8 bg-orange-500 dark:bg-orange-400"></div>
      </div>

      <!-- Step 3 -->
      <div class="relative flex flex-col items-center group">
        <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-red-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-red-600 shadow-lg">
          3
          <div class="absolute -left-2 top-1/2 w-4 h-1 bg-orange-500 dark:bg-red-400 transform -translate-y-1/2 hidden md:block"></div>
        </div>
        <div class="text-center mt-4 w-full md:w-auto">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Execution & Review</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Implementing solutions and continuously reviewing progress.</p>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Progress Indicators 구성 요소

레트로/빈티지 스타일의 진행률 표시기 구성 요소는 Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.

열다

Playful_Job_Application_Progress_Indicator

입사 지원 워크플로우를 위한 복잡하고 유쾌하며 반응이 빠른 진행 상태 표시기 구성 요소로, 사탕/달콤한 색 구성표와 다크 모드 지원을 특징으로 합니다. 구인 게시판 및 경력 개발 플랫폼을 위해 설계된 이 제품은 애니메이션 전환과 격려 메시지로 여러 지원 단계를 시각적으로 나타냅니다.

열다

3D_Candy_Music_Player_Progress

3D에서 영감을 받은 복잡한 음악 플레이어 진행률 표시기 구성 요소로, 사탕/달콤한 색상으로 음악 스트리밍 및 오디오 플랫폼에 적합합니다. 반응성 및 다크 모드 지원이 특징입니다.

열다