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 Login 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"> <div class="w-full max-w-md"> <div class="bg-white rounded-[2.5rem] shadow-[0_40px_80px_-15px_rgba(0,0,0,0.1)] p-12 border border-white"> <div class="text-center mb-10"> <div class="h-16 w-16 bg-slate-900 rounded-2xl flex items-center justify-center text-white font-black text-2xl mx-auto mb-6 rotate-12 shadow-2xl">L</div> <h1 class="text-3xl font-black text-slate-900 tracking-tighter">Welcome Back.</h1> <p class="text-slate-400 font-bold uppercase tracking-widest text-[10px] mt-2 italic shadow-sm">Identity Verification Required</p> </div> <form class="space-y-6"> <div> <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3 ml-2">Email Address</label> <input type="email" placeholder="you@example.com" class="w-full h-14 bg-slate-50 border-2 border-slate-50 rounded-2xl px-6 font-bold text-slate-900 placeholder-slate-300 focus:outline-none focus:border-indigo-600 focus:bg-white transition-all"> </div> <div> <div class="flex justify-between items-center mb-3"> <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Secure Password</label> <a href="##" class="text-[10px] font-black text-indigo-600 uppercase tracking-widest hover:underline underline-offset-4">Forgot?</a> </div> <input type="password" placeholder="••••••••" class="w-full h-14 bg-slate-50 border-2 border-slate-50 rounded-2xl px-6 font-bold text-slate-900 placeholder-slate-300 focus:outline-none focus:border-indigo-600 focus:bg-white transition-all"> </div> <button type="submit" class="w-full h-16 bg-slate-900 text-white rounded-2xl font-black text-xs uppercase tracking-widest shadow-2xl hover:bg-indigo-600 transition active:scale-95 cursor-pointer"> Authorize Session </button> <div class="pt-6 border-t border-slate-100 text-center"> <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">New here? <a href="##" class="text-rose-600 underline underline-offset-4 decoration-2">Create Account</a></p> </div> </form> </div> </div> </body> </html>
