Componente Indicatori di progresso
Un componente indicatore di avanzamento semplice e reattivo con effetti neon/bagliore e toni gioiello, adatto per siti Web di consulenza/assistenza. Include il supporto per la modalità oscura.
Codice HTML
<div class="font-sans bg-stone-950 text-emerald-300 min-h-screen p-8 sm:p-12 lg:p-16 flex items-center justify-center dark:bg-gray-950 dark:text-emerald-300">
<div class="w-full max-w-4xl">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 sm:mb-14 relative group leading-tight">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-emerald-200 to-emerald-400 drop-shadow-lg inline-block relative">
Our Consulting Process
<span class="absolute inset-x-0 bottom-[-5px] h-[3px] bg-gradient-to-r from-emerald-500 via-emerald-300 to-emerald-500 blur-sm opacity-75 animate-pulse"></span>
</span>
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Step 1 -->
<div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
<div class="relative z-10">
<div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
<p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">1</p>
<span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
</div>
<h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Discovery</h3>
<p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Understanding your unique needs and challenges through detailed consultation.</p>
</div>
</div>
<!-- Step 2 -->
<div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
<div class="relative z-10">
<div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
<p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">2</p>
<span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
</div>
<h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Strategy</h3>
<p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Crafting tailored strategies and actionable plans specific to your objectives.</p>
</div>
</div>
<!-- Step 3 -->
<div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
<div class="relative z-10">
<div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
<p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">3</p>
<span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
</div>
<h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Execution</h3>
<p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Implementing solutions and providing hands-on support for successful deployment.</p>
</div>
</div>
<!-- Step 4 -->
<div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
<div class="relative z-10">
<div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
<p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">4</p>
<span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
</div>
<h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Growth</h3>
<p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Monitoring performance and refining strategies for continuous improvement and growth.</p>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Indicatori di progresso
Un componente di indicatori di avanzamento in stile retrò/vintage con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Playful_Job_Application_Progress_Indicator
Un componente complesso, giocoso e reattivo per i flussi di lavoro delle domande di lavoro, con una combinazione di colori caramelle/dolci e il supporto della modalità scura. Progettato per bacheche di lavoro e piattaforme di sviluppo della carriera, rappresenta visivamente più fasi di candidatura con transizioni animate e messaggi incoraggianti.
Componente Indicatori di progresso
Un componente indicatore di stato in stile glassmorphism per applicazioni di social media, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura. Utilizza una combinazione di colori analoga e offre un'interfaccia complessa e ricca con più elementi interattivi. Il componente è reattivo e supporta un tema scuro con Tailwind CSS.