Form by themrsami
#e8e8e8
HTML +TailwindCSS
1<div class="flex items-center justify-center"> 2 <div 3 class="bg-gray-900 border-[4px] border-blue-900 rounded-2xl hover:border-blue-500 transition-all duration-200" 4 > 5 <div 6 class="mx-auto flex items-center space-y-4 py-16 px-12 font-semibold text-gray-500 flex-col" 7 > 8 <svg viewBox="0 0 24 24" class="h-12 w-12 text-white" fill="currentColor"> 9 <g> 10 <path 11 d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z" 12 ></path> 13 </g> 14 </svg> 15 <h1 class="text-white text-2xl">Sign in to Twitter</h1> 16 <input 17 class="w-full p-2 bg-blue-900 rounded-md border border-gray-700 focus:border-blue-700 hover:border-blue-500 transition-all duration-200" 18 placeholder="Email" 19 type="email" 20 name="email" 21 id="" 22 /> 23 <input 24 class="w-full p-2 bg-blue-900 rounded-md border border-gray-700 focus:border-blue-700 hover:border-blue-500 transition-all duration-200" 25 placeholder="Password" 26 type="password" 27 name="password" 28 id="" 29 /> 30 <input 31 class="w-full p-2 bg-gray-50 rounded-full font-bold text-gray-900 border-[4px] border-gray-700 hover:border-blue-500 transition-all duration-200" 32 type="submit" 33 id="" 34 /> 35 <p> 36 Don't have an account? 37 <a 38 class="font-semibold text-white hover:text-blue-500 transition-all duration-200" 39 href="" 40 >Sign up</a 41 > 42 </p> 43 </div> 44 </div> 45</div> 46
476 views
476 views
MIT License