Progress Indicators Component
A simple, clean, and professional progress indicator component with warm sunset tones, suitable for business and consulting services, featuring responsive design and dark mode support.
HTML Code
<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>Related Components
BrutalistGrayscaleProgressBar
A brutalist-style grayscale progress bar for blog content, with simple design, dark mode support, and responsiveness.
Progress Indicators Component
A responsive Progress Indicators Component designed for a Dark Mode UI dashboard with an analogous color scheme. It includes various progress indicators like bars, circles, and an activity feed, all styled with Tailwind CSS for dark mode support. No JavaScript is used.
Progress Indicators Component
A complex, monochromatic social media-themed progress indicators component with dark mode UI, featuring multiple progress bars, activity feed, and user avatars.