Form by Shamaun-Nabi
#212121
HTML +TailwindCSS
1<section> 2 <div 3 class="flex bg-white items-center justify-center px-4 py-10 sm:px-6 sm:py-16 lg:px-8 lg:py-8" 4 > 5 <div class="xl:mx-auto xl:w-full shadow-md p-4 xl:max-w-sm 2xl:max-w-md"> 6 <div class="mb-2 flex justify-center"></div> 7 <h2 class="text-center text-2xl font-bold leading-tight text-black"> 8 Sign in to your account 9 </h2> 10 <p class="mt-2 text-center text-sm text-gray-600"> 11 Don't have an account? Create a free account 12 </p> 13 <form class="mt-8" method="POST" action="#"> 14 <div class="space-y-5"> 15 <div> 16 <label class="text-base font-medium text-gray-900"> 17 Email address 18 </label> 19 <div class="mt-2"> 20 <input 21 placeholder="Email" 22 type="email" 23 class="flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50" 24 /> 25 </div> 26 </div> 27 <div> 28 <div class="flex items-center justify-between"> 29 <label class="text-base font-medium text-gray-900"> 30 Password 31 </label> 32 <a 33 class="text-sm font-semibold text-black hover:underline" 34 title="" 35 href="#" 36 > 37 Forgot password? 38 </a> 39 </div> 40 <div class="mt-2"> 41 <input 42 placeholder="Password" 43 type="password" 44 class="flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50" 45 /> 46 </div> 47 </div> 48 <div> 49 <button 50 class="inline-flex w-full items-center justify-center rounded-md bg-black px-3.5 py-2.5 font-semibold leading-7 text-white hover:bg-black/80" 51 type="button" 52 > 53 Get started 54 </button> 55 </div> 56 </div> 57 </form> 58 <div class="mt-3 space-y-3"> 59 <button 60 class="relative inline-flex w-full items-center justify-center rounded-md border border-gray-400 bg-white px-3.5 py-2.5 font-semibold text-gray-700 transition-all duration-200 hover:bg-gray-100 hover:text-black focus:bg-gray-100 focus:text-black focus:outline-none" 61 type="button" 62 > 63 <span class="mr-2 inline-block"> 64 <svg 65 fill="currentColor" 66 viewBox="0 0 24 24" 67 xmlns="http://www.w3.org/2000/svg" 68 class="h-6 w-6 text-rose-500" 69 > 70 <path 71 d="M20.283 10.356h-8.327v3.451h4.792c-.446 2.193-2.313 3.453-4.792 3.453a5.27 5.27 0 0 1-5.279-5.28 5.27 5.27 0 0 1 5.279-5.279c1.259 0 2.397.447 3.29 1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233a8.908 8.908 0 0 0-8.934 8.934 8.907 8.907 0 0 0 8.934 8.934c4.467 0 8.529-3.249 8.529-8.934 0-.528-.081-1.097-.202-1.625z" 72 ></path> 73 </svg> 74 </span> 75 Sign in with Google 76 </button> 77 </div> 78 </div> 79 </div> 80</section> 81
295 views
295 views
MIT License