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 Multi Step Form</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-indigo-50 flex items-center justify-center min-h-screen p-6 antialiased" x-data="{ step: 1 }"> <div class="w-full max-w-2xl"> <!-- Stepper Indicator --> <div class="flex items-center justify-between mb-16 px-4"> <div class="flex flex-col items-center gap-4 group"> <div :class="step >= 1 ? 'bg-slate-900 border-slate-900 text-white' : 'bg-white border-slate-200 text-slate-300'" class="h-14 w-14 rounded-2xl border-2 flex items-center justify-center font-black text-sm transition-all shadow-2xl">01</div> <span class="text-[10px] font-black uppercase tracking-[0.2em]" :class="step >= 1 ? 'text-slate-900' : 'text-slate-300'">Profile</span> </div> <div class="flex-1 h-0.5 bg-slate-200 mx-4 -mt-10"> <div :class="step >= 2 ? 'w-full' : 'w-0'" class="h-full bg-slate-900 transition-all duration-700"></div> </div> <div class="flex flex-col items-center gap-4 group"> <div :class="step >= 2 ? 'bg-slate-900 border-slate-900 text-white' : 'bg-white border-slate-200 text-slate-300'" class="h-14 w-14 rounded-2xl border-2 flex items-center justify-center font-black text-sm transition-all">02</div> <span class="text-[10px] font-black uppercase tracking-[0.2em]" :class="step >= 2 ? 'text-slate-900' : 'text-slate-300'">Workspace</span> </div> <div class="flex-1 h-0.5 bg-slate-200 mx-4 -mt-10"> <div :class="step >= 3 ? 'w-full' : 'w-0'" class="h-full bg-slate-900 transition-all duration-700"></div> </div> <div class="flex flex-col items-center gap-4 group"> <div :class="step >= 3 ? 'bg-slate-900 border-slate-900 text-white' : 'bg-white border-slate-200 text-slate-300'" class="h-14 w-14 rounded-2xl border-2 flex items-center justify-center font-black text-sm transition-all">03</div> <span class="text-[10px] font-black uppercase tracking-[0.2em]" :class="step >= 3 ? 'text-slate-900' : 'text-slate-300'">Verify</span> </div> </div> <!-- Form Container --> <div class="bg-white rounded-[3rem] shadow-3xl p-12 lg:p-16 border border-white"> <!-- Step 1 Content --> <div x-show="step === 1" x-transition:enter="transition ease-out duration-300 transform opacity-0 scale-95" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"> <h2 class="text-3xl font-black text-slate-900 tracking-tighter mb-8 italic">Basic Identity.</h2> <div class="space-y-6"> <div> <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3 ml-2">Public Handle</label> <input type="text" placeholder="@username" class="w-full h-14 bg-slate-50 rounded-2xl px-6 font-bold text-slate-900 border-2 border-transparent focus:outline-none focus:border-indigo-600 focus:bg-white transition-all"> </div> <button @click="step = 2" class="w-full h-18 bg-slate-900 text-white rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-indigo-600 transition-all cursor-pointer">Continue to Workspace</button> </div> </div> <!-- Step 2 Content --> <div x-show="step === 2" x-transition:enter="transition ease-out duration-300 transform" style="display: none;"> <h2 class="text-3xl font-black text-slate-900 tracking-tighter mb-8 italic">Workspace Setup.</h2> <div class="space-y-6"> <div> <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3 ml-2">Organization Name</label> <input type="text" class="w-full h-14 bg-slate-50 rounded-2xl px-6 font-bold text-slate-900 border-2 border-transparent focus:outline-none focus:border-indigo-600 focus:bg-white transition-all"> </div> <div class="flex gap-4"> <button @click="step = 1" class="flex-1 h-18 bg-slate-50 text-slate-400 rounded-2xl font-black text-xs uppercase tracking-widest hover:text-slate-900 transition-all cursor-pointer">Go Back</button> <button @click="step = 3" class="flex-[2] h-18 bg-slate-900 text-white rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-indigo-600 transition-all cursor-pointer">Final Step</button> </div> </div> </div> <!-- Step 3 Content --> <div x-show="step === 3" x-transition:enter="transition ease-out duration-300 transform" style="display: none;"> <h2 class="text-3xl font-black text-slate-900 tracking-tighter mb-8 italic">Verification.</h2> <p class="text-slate-500 font-bold mb-10 italic">We just need to confirm your details. Click initialize to complete the deployment.</p> <div class="flex gap-4"> <button @click="step = 2" class="flex-1 h-18 bg-slate-50 text-slate-400 rounded-2xl font-black text-xs uppercase tracking-widest hover:text-slate-900 transition-all cursor-pointer">Review Details</button> <button class="flex-[2] h-18 bg-rose-600 text-white rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-slate-900 shadow-2xl shadow-rose-100 transition-all cursor-pointer">Initialize Deployment</button> </div> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
