Form by iZOXVL
#e8e8e8
HTML +TailwindCSS
1<div class="max-w-lg w-full"> 2 <div 3 style="box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);" 4 class="bg-gray-800 rounded-lg shadow-xl overflow-hidden" 5 > 6 <div class="p-8"> 7 <h2 class="text-center text-3xl font-extrabold text-white"> 8 Welcome Back 9 </h2> 10 <p class="mt-4 text-center text-gray-400">Sign in to continue</p> 11 <form method="POST" action="#" class="mt-8 space-y-6"> 12 <div class="rounded-md shadow-sm"> 13 <div> 14 <label class="sr-only" for="email">Email address</label> 15 <input 16 placeholder="Email address" 17 class="appearance-none relative block w-full px-3 py-3 border border-gray-700 bg-gray-700 text-white rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" 18 required="" 19 autocomplete="email" 20 type="email" 21 name="email" 22 id="email" 23 /> 24 </div> 25 <div class="mt-4"> 26 <label class="sr-only" for="password">Password</label> 27 <input 28 placeholder="Password" 29 class="appearance-none relative block w-full px-3 py-3 border border-gray-700 bg-gray-700 text-white rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" 30 required="" 31 autocomplete="current-password" 32 type="password" 33 name="password" 34 id="password" 35 /> 36 </div> 37 </div> 38 39 <div class="flex items-center justify-between mt-4"> 40 <div class="flex items-center"> 41 <input 42 class="h-4 w-4 text-indigo-500 focus:ring-indigo-400 border-gray-600 rounded" 43 type="checkbox" 44 name="remember-me" 45 id="remember-me" 46 /> 47 <label class="ml-2 block text-sm text-gray-400" for="remember-me" 48 >Remember me</label 49 > 50 </div> 51 52 <div class="text-sm"> 53 <a 54 class="font-medium text-indigo-500 hover:text-indigo-400" 55 href="#" 56 > 57 Forgot your password? 58 </a> 59 </div> 60 </div> 61 62 <div> 63 <button 64 class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-gray-900 bg-indigo-500 hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" 65 type="submit" 66 > 67 Sign In 68 </button> 69 </div> 70 </form> 71 </div> 72 <div class="px-8 py-4 bg-gray-700 text-center"> 73 <span class="text-gray-400">Don't have an account?</span> 74 <a class="font-medium text-indigo-500 hover:text-indigo-400" href="#" 75 >Sign up</a 76 > 77 </div> 78 </div> 79</div> 80
304 views
304 views
MIT License