CCHub Logo CCHub Tailwind Collection
コンポーネント 進行状況インジケーター 進行状況インジケータ コンポーネント

進行状況インジケータ コンポーネント

温かみのある夕焼けの色調を備えたシンプルでクリーンでプロフェッショナルなプログレスインジケーターコンポーネントは、ビジネスやコンサルティングサービスに適しており、レスポンシブデザインとダークモードのサポートを備えています。

プレビュー

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>

関連コンポーネント

3D プログレスバーコンポーネント

3Dエフェクト、Tailwind CSS、レスポンシブデザイン、ダークモードのサポートでスタイリングされています。

開ける

ArtDeco_Food_Restaurant_Progress_Indicators

アールデコ調にインスパイアされた食品/レストランのWebサイト向けの進行状況インジケーターコンポーネントで、幾何学模様、豪華なスタイリング、アースカラーが特徴です。複数のステップとダークモードをサポートする複雑なインターフェース。

開ける

進行状況インジケータ コンポーネント

glassmorphism スタイル、レスポンシブデザイン、およびダークテーマのサポートを備えた進行状況インジケータコンポーネント。スタイリングにはTailwind CSSを使用します。

開ける