Form by Cybercom682
#212121
HTML +TailwindCSS
1<form 2 class="bg-white dark:bg-zinc-900 shadow-2xl rounded-2xl overflow-hidden border-4 border-blue-400 dark:border-blue-800" 3> 4 <div class="px-8 py-10 md:px-10"> 5 <h2 6 class="text-4xl font-extrabold text-center text-zinc-800 dark:text-white" 7 > 8 Welcome Back! 9 </h2> 10 <p class="text-center text-zinc-600 dark:text-zinc-400 mt-3"> 11 We missed you, sign in to continue. 12 </p> 13 <div class="mt-10"> 14 <div class="relative"> 15 <label 16 class="block mb-3 text-sm font-medium text-zinc-600 dark:text-zinc-200" 17 for="email" 18 >Email</label 19 > 20 <input 21 placeholder="[email protected]" 22 class="block w-full px-4 py-3 mt-2 text-zinc-800 bg-white border-2 rounded-lg dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-opacity-50 focus:outline-none focus:ring focus:ring-blue-400" 23 name="email" 24 id="email" 25 type="email" 26 /> 27 </div> 28 <div class="mt-6"> 29 <label 30 class="block mb-3 text-sm font-medium text-zinc-600 dark:text-zinc-200" 31 for="password" 32 >Password</label 33 > 34 <input 35 placeholder="••••••••" 36 class="block w-full px-4 py-3 mt-2 text-zinc-800 bg-white border-2 rounded-lg dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-opacity-50 focus:outline-none focus:ring focus:ring-blue-400" 37 name="password" 38 id="password" 39 type="password" 40 /> 41 </div> 42 <div class="mt-10"> 43 <button 44 class="w-full px-4 py-3 tracking-wide text-white transition-colors duration-200 transform bg-gradient-to-r from-blue-600 to-cyan-600 rounded-lg hover:from-blue-700 hover:to-cyan-700 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-800" 45 type="submit" 46 > 47 Let's Go 48 </button> 49 </div> 50 </div> 51 </div> 52 <div class="px-8 py-4 bg-blue-200 dark:bg-zinc-800"> 53 <div class="text-sm text-blue-900 dark:text-blue-300 text-center"> 54 Don't have an account? 55 <a class="font-medium underline" href="#">Sign up</a> 56 </div> 57 </div> 58</form> 59
153 views
153 views
MIT License