Componente Indicatori di progresso
Un componente indicatore di progresso semplice, pulito e professionale con toni caldi del tramonto, adatto per servizi aziendali e di consulenza, caratterizzato da un design reattivo e supporto per la modalità oscura.
Codice 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>Componenti correlati
Indicatore di progresso della seppia organica
Un semplice indicatore di progresso ispirato alla natura per le app di appuntamenti/social, caratterizzato da toni caldi seppia e marroni con linee fluide, reattivo e compatibile con la modalità scura.
Componente Indicatori di progresso
Un componente di indicatori di progresso in stile brutalista ad alto contrasto, che mostra il lavoro o i prodotti in un portfolio. È dotato di un'interfaccia ricca con più elementi interattivi, progettata per essere reattiva con il supporto del tema scuro utilizzando Tailwind CSS.
BrutalistaScala di grigiBarra di progresso
Una barra di avanzamento in scala di grigi in stile brutalista per i contenuti del blog, con un design semplice, supporto per la modalità oscura e reattività.