Step Timeline UI

<div
        class="max-w-md space-y-12 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-1 before:bg-slate-100 before:z-0">
        <div
            class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
            <div
                class="flex items-center justify-center w-10 h-10 rounded-full border-4 border-white bg-slate-900 text-white font-black z-10 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 shadow-xl italic">
                1</div>
            <div
                class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] p-6 rounded-3xl bg-white border border-slate-100 shadow-xl group-hover:scale-105 transition-transform">
                <time class="font-black text-[10px] text-indigo-600 uppercase tracking-widest mb-2 block">Phase
                    01</time>
                <div class="text-slate-900 font-bold text-sm">Conceptual Design</div>
            </div>
        </div>
        <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
            <div
                class="flex items-center justify-center w-10 h-10 rounded-full border-4 border-white bg-slate-200 text-slate-500 font-black z-10 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 italic">
                2</div>
            <div
                class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] p-6 rounded-3xl bg-slate-50 border border-slate-100 group-hover:scale-105 transition-transform opacity-50">
                <time class="font-black text-[10px] text-slate-400 uppercase tracking-widest mb-2 block">Phase 02</time>
                <div class="text-slate-900 font-bold text-sm">Development</div>
            </div>
        </div>
    </div>