![](/build/_assets/logo-png-XGWSYHKJ.png)
Form by LeryLey
#e8e8e8
HTML +TailwindCSS
1<div 2 class="w-80 rounded-lg shadow h-auto p-6 bg-white relative overflow-hidden" 3> 4 <div class="flex flex-col justify-center items-center space-y-2"> 5 <h2 class="text-2xl font-medium text-slate-700">Login</h2> 6 <p class="text-slate-500">Enter details below.</p> 7 </div> 8 <form class="w-full mt-4 space-y-3"> 9 <div> 10 <input 11 class="outline-none border-2 rounded-md px-2 py-1 text-slate-500 w-full focus:border-blue-300" 12 placeholder="Username" 13 id="username" 14 name="username" 15 type="text" 16 /> 17 </div> 18 <div> 19 <input 20 class="outline-none border-2 rounded-md px-2 py-1 text-slate-500 w-full focus:border-blue-300" 21 placeholder="Password" 22 id="password" 23 name="password" 24 type="password" 25 /> 26 </div> 27 <div class="flex items-center justify-between"> 28 <div class="flex items-center"> 29 <input 30 class="mr-2 w-4 h-4" 31 id="remember" 32 name="remember" 33 type="checkbox" 34 /> 35 <span class="text-slate-500">Remember me </span> 36 </div> 37 <a class="text-blue-500 font-medium hover:underline" href="#" 38 >Forgot Password</a 39 > 40 </div> 41 <button 42 class="w-full justify-center py-1 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 rounded-md text-white ring-2" 43 id="login" 44 name="login" 45 type="submit" 46 > 47 login 48 </button> 49 <p class="flex justify-center space-x-1"> 50 <span class="text-slate-700"> Have an account? </span> 51 <a class="text-blue-500 hover:underline" href="#">Sign Up</a> 52 </p> 53 </form> 54</div> 55
137 views
137 views
MIT License