Form by iZOXVL
#212121
HTML +TailwindCSS
1<div 2 style="animation: slideInFromLeft 1s ease-out;" 3 class="max-w-md w-full bg-gradient-to-r from-blue-800 to-purple-600 rounded-xl shadow-2xl overflow-hidden p-8 space-y-8" 4> 5 <h2 6 style="animation: appear 2s ease-out;" 7 class="text-center text-4xl font-extrabold text-white" 8 > 9 Welcome 10 </h2> 11 <p style="animation: appear 3s ease-out;" class="text-center text-gray-200"> 12 Sign in to your account 13 </p> 14 <form method="POST" action="#" class="space-y-6"> 15 <div class="relative"> 16 <input 17 placeholder="[email protected]" 18 class="peer h-10 w-full border-b-2 border-gray-300 text-white bg-transparent placeholder-transparent focus:outline-none focus:border-purple-500" 19 required="" 20 id="email" 21 name="email" 22 type="email" 23 /> 24 <label 25 class="absolute left-0 -top-3.5 text-gray-500 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-purple-500 peer-focus:text-sm" 26 for="email" 27 >Email address</label 28 > 29 </div> 30 <div class="relative"> 31 <input 32 placeholder="Password" 33 class="peer h-10 w-full border-b-2 border-gray-300 text-white bg-transparent placeholder-transparent focus:outline-none focus:border-purple-500" 34 required="" 35 id="password" 36 name="password" 37 type="password" 38 /> 39 <label 40 class="absolute left-0 -top-3.5 text-gray-500 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-3.5 peer-focus:text-purple-500 peer-focus:text-sm" 41 for="password" 42 >Password</label 43 > 44 </div> 45 <div class="flex items-center justify-between"> 46 <label class="flex items-center text-sm text-gray-200"> 47 <input 48 class="form-checkbox h-4 w-4 text-purple-600 bg-gray-800 border-gray-300 rounded" 49 type="checkbox" 50 /> 51 <span class="ml-2">Remember me</span> 52 </label> 53 <a class="text-sm text-purple-200 hover:underline" href="#" 54 >Forgot your password?</a 55 > 56 </div> 57 <button 58 class="w-full py-2 px-4 bg-purple-500 hover:bg-purple-700 rounded-md shadow-lg text-white font-semibold transition duration-200" 59 type="submit" 60 > 61 Sign In 62 </button> 63 </form> 64 <div class="text-center text-gray-300"> 65 Don't have an account? 66 <a class="text-purple-300 hover:underline" href="#">Sign up</a> 67 </div> 68</div> 69
601 views
601 views
MIT License