Form by themrsami
#e8e8e8
HTML +TailwindCSS
1<div class="flex flex-col items-center justify-center h-screen dark"> 2 <div class="w-full max-w-md bg-gray-800 rounded-lg shadow-md p-6"> 3 <h2 class="text-2xl font-bold text-gray-200 mb-4">Login</h2> 4 <form class="flex flex-col"> 5 <input placeholder="Email address" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="email"> 6 <input placeholder="Password" class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="password"> 7 <div class="flex items-center justify-between flex-wrap"> 8 <label class="text-sm text-gray-200 cursor-pointer" for="remember-me"> 9 <input class="mr-2" id="remember-me" type="checkbox"> 10 Remember me 11 </label> 12 <a class="text-sm text-blue-500 hover:underline mb-0.5" href="#">Forgot password?</a> 13 <p class="text-white mt-4"> Don't have an account? <a class="text-sm text-blue-500 -200 hover:underline mt-4" href="#">Signup</a></p> 14 </div> 15 <button class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-indigo-600 hover:to-blue-600 transition ease-in-out duration-150" type="submit">Login</button> 16 </form> 17 </div> 18</div> 19
948 views
948 views
MIT License