Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Step Progress Indicator</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex items-center justify-center min-h-screen p-6 antialiased" x-data="{ currentStep: 2 }"> <div class="w-full max-w-2xl px-12"> <div class="relative flex justify-between items-center"> <!-- Track Line (Background) --> <div class="absolute left-0 top-1/2 -translate-y-1/2 w-full h-1 bg-slate-200 rounded-full"></div> <!-- Active Line --> <div class="absolute left-0 top-1/2 -translate-y-1/2 h-1 bg-indigo-600 rounded-full transition-all duration-700" :style="'width: ' + ((currentStep - 1) / 3 * 100) + '%'" ></div> <!-- Steps --> <template x-for="step in [1, 2, 3, 4]"> <div class="relative z-10 flex flex-col items-center"> <div class="h-10 w-10 rounded-xl flex items-center justify-center border-4 transition-all duration-500 shadow-xl" :class="currentStep >= step ? 'bg-indigo-600 border-white text-white rotate-45' : 'bg-white border-slate-100 text-slate-300'" > <div :class="currentStep >= step ? '-rotate-45' : ''"> <template x-if="currentStep > step"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg> </template> <template x-if="currentStep <= step"> <span class="text-xs font-black" x-text="step"></span> </template> </div> </div> <span class="absolute -bottom-10 whitespace-nowrap text-[9px] tracking-widest uppercase font-black transition-colors duration-300" :class="currentStep >= step ? 'text-indigo-600 italic' : 'text-slate-300'" x-text="['Initialize', 'Validation', 'Deployment', 'Verified'][step-1]" ></span> </div> </template> </div> <div class="mt-28 flex justify-center gap-6"> <button @click="currentStep = Math.max(1, currentStep - 1)" class="px-8 h-12 bg-white border border-slate-100 text-slate-400 text-[10px] font-black uppercase tracking-widest rounded-2xl hover:text-indigo-600 transition-all cursor-pointer">Back</button> <button @click="currentStep = Math.min(4, currentStep + 1)" class="px-8 h-12 bg-slate-900 text-white text-[10px] font-black uppercase tracking-widest rounded-2xl hover:bg-indigo-600 transition-all shadow-xl shadow-slate-200 cursor-pointer">Continue</button> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
