Multi-Step Progress Form

<div class="max-w-2xl w-full mx-auto px-10 py-12 bg-white rounded-[3rem] shadow-2xl border border-slate-100">
        <div class="flex justify-between items-center mb-16 relative">
            <div class="absolute h-1 bg-slate-100 top-1/2 left-0 right-0 -translate-y-1/2 -z-0"></div>
            <div
                class="w-12 h-12 bg-indigo-600 text-white rounded-full flex items-center justify-center font-black relative z-10 shadow-lg shadow-indigo-100 italic transition-transform hover:scale-110 cursor-pointer">
                1</div>
            <div
                class="w-12 h-12 bg-white border-4 border-slate-100 text-slate-400 rounded-full flex items-center justify-center font-black relative z-10 italic transition-transform hover:scale-110 cursor-pointer">
                2</div>
            <div
                class="w-12 h-12 bg-white border-4 border-slate-100 text-slate-400 rounded-full flex items-center justify-center font-black relative z-10 italic transition-transform hover:scale-110 cursor-pointer">
                3</div>
        </div>
        <div class="space-y-6">
            <div class="mb-10">
                <h2
                    class="text-4xl font-black text-slate-900 tracking-tight leading-tight uppercase italic underline decoration-indigo-600 decoration-8 underline-offset-8">
                    Personal Details</h2>
                <p class="text-slate-500 mt-6 text-lg font-medium">Please fill in your primary contact information.</p>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-4">Legal First
                        Name</label>
                    <input type="text" placeholder="e.g. Erik"
                        class="p-5 bg-slate-50 border-none rounded-2xl w-full text-sm font-bold placeholder-slate-300 focus:ring-4 focus:ring-indigo-100 outline-none transition-all">
                </div>
                <div class="space-y-2">
                    <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-4">Legal Last
                        Name</label>
                    <input type="text" placeholder="e.g. Vance"
                        class="p-5 bg-slate-50 border-none rounded-2xl w-full text-sm font-bold placeholder-slate-300 focus:ring-4 focus:ring-indigo-100 outline-none transition-all">
                </div>
            </div>
            <div class="flex flex-col sm:flex-row justify-end gap-4 mt-12 pb-2">
                <button
                    class="px-10 py-4 bg-slate-100 text-slate-500 rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-slate-200 transition-all active:scale-95">Previous</button>
                <button
                    class="px-10 py-4 bg-indigo-600 text-white rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-indigo-700 transition-all active:scale-95 shadow-xl shadow-indigo-100">Next
                    Step</button>
            </div>
        </div>
    </div>