Split Signup Form

<div class="flex h-screen bg-white overflow-hidden">
        <div class="hidden md:block w-1/2 bg-slate-900 relative p-12 overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/20 to-transparent"></div>
            <div class="relative z-10 flex flex-col justify-between h-full text-white">
                <div class="text-2xl font-bold">Hub.</div>
                <div>
                    <h2 class="text-4xl font-bold mb-4">"The best workflow tool I've ever used."</h2>
                    <p class="text-slate-400">— Marcus Thorne, Lead Designer</p>
                </div>
            </div>
        </div>
        <div class="w-full md:w-1/2 p-12 flex items-center overflow-y-auto">
            <div class="w-full max-w-sm mx-auto">
                <h2 class="text-3xl font-bold mb-8 text-slate-900">Create account</h2>
                <div class="grid grid-cols-2 gap-4 mb-8">
                    <button
                        class="flex items-center justify-center gap-2 py-2.5 border border-slate-200 rounded-lg hover:bg-slate-50 transition-all active:scale-95"><span
                            class="w-5 h-5 bg-slate-100 rounded"></span> Google</button>
                    <button
                        class="flex items-center justify-center gap-2 py-2.5 border border-slate-200 rounded-lg hover:bg-slate-50 transition-all active:scale-95"><span
                            class="w-5 h-5 bg-slate-100 rounded"></span> Apple</button>
                </div>
                <div class="relative mb-8">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-slate-200"></div>
                    </div>
                    <div class="relative flex justify-center text-xs uppercase"><span
                            class="bg-white px-2 text-slate-400 font-bold">Or continue with email</span></div>
                </div>
                <form class="space-y-4">
                    <input type="email" placeholder="Email"
                        class="w-full px-4 py-3 bg-slate-50 border-none rounded-xl outline-none focus:ring-2 focus:ring-indigo-500/20">
                    <input type="password" placeholder="Password"
                        class="w-full px-4 py-3 bg-slate-50 border-none rounded-xl outline-none focus:ring-2 focus:ring-indigo-500/20">
                    <button type="submit"
                        class="w-full py-4 bg-slate-950 text-white rounded-xl font-bold hover:bg-black transition-all active:scale-95">Get
                        Started</button>
                </form>
            </div>
        </div>
    </div>