Login Simple Form

<div class="max-w-sm mx-6 p-10 bg-white border border-slate-200 rounded-3xl shadow-sm">
        <h2 class="text-2xl font-bold mb-2 text-slate-900">Welcome back</h2>
        <p class="text-slate-500 text-sm mb-8">Please enter your details to sign in.</p>
        <form class="space-y-4">
            <div>
                <label class="block text-xs font-bold text-slate-500 mb-1.5 uppercase">Email Address</label>
                <input type="email"
                    class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
            </div>
            <div>
                <label class="block text-xs font-bold text-slate-500 mb-1.5 uppercase">Password</label>
                <input type="password"
                    class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
            </div>
            <div class="flex items-center justify-between">
                <label class="flex items-center gap-2 text-sm text-slate-600">
                    <input type="checkbox" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                    Remember me
                </label>
                <a href="#" class="text-sm text-indigo-600 font-bold hover:underline">Forgot?</a>
            </div>
            <button type="submit"
                class="w-full py-3 bg-indigo-600 text-white rounded-xl font-bold shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95">Sign
                In</button>
        </form>
    </div>