Form by themrsami
#e8e8e8
HTML +TailwindCSS
1<div class="relative py-3 sm:max-w-xl sm:mx-auto"> 2 <div 3 class="relative px-4 py-10 bg-black mx-8 md:mx-0 shadow rounded-3xl sm:p-10" 4 > 5 <div class="max-w-md mx-auto text-white"> 6 <div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-5"> 7 <div> 8 <label 9 class="font-semibold text-sm text-gray-400 pb-1 block" 10 for="fullname" 11 >Full Name</label 12 > 13 <input 14 class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-800 text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500" 15 type="text" 16 id="fullname" 17 /> 18 </div> 19 <div> 20 <label 21 class="font-semibold text-sm text-gray-400 pb-1 block" 22 for="email" 23 >Email</label 24 > 25 <input 26 class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-800 text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500" 27 type="email" 28 id="email" 29 /> 30 </div> 31 <div> 32 <label 33 class="font-semibold text-sm text-gray-400 pb-1 block" 34 for="username" 35 >Username</label 36 > 37 <input 38 class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-800 text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500" 39 type="text" 40 id="username" 41 /> 42 </div> 43 <div> 44 <label 45 class="font-semibold text-sm text-gray-400 pb-1 block" 46 for="password" 47 >Password</label 48 > 49 <input 50 class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-800 text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500" 51 type="password" 52 id="password" 53 /> 54 </div> 55 </div> 56 <div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-5"> 57 <div> 58 <label 59 class="font-semibold text-sm text-gray-400 pb-1 block" 60 for="dob" 61 >Date of Birth</label 62 > 63 <input 64 class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-800 text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500" 65 type="date" 66 id="dob" 67 /> 68 </div> 69 <div> 70 <label 71 class="font-semibold text-sm text-gray-400 pb-1 block" 72 for="gender" 73 >Gender</label 74 > 75 <select 76 class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full bg-gray-800 text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500" 77 id="gender" 78 > 79 <option value="male">Male</option> 80 <option value="female">Female</option> 81 <option value="other">Other</option> 82 </select> 83 </div> 84 </div> 85 <div class="flex justify-center items-center"> 86 <div> 87 <button 88 class="flex items-center justify-center py-2 px-20 bg-white hover:bg-gray-200 focus:ring-blue-500 focus:ring-offset-blue-200 text-gray-700 w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg" 89 > 90 <svg 91 viewBox="0 0 24 24" 92 height="25" 93 width="25" 94 y="0px" 95 x="0px" 96 xmlns="http://www.w3.org/2000/svg" 97 > 98 <path 99 d="M12,5c1.6167603,0,3.1012573,0.5535278,4.2863159,1.4740601l3.637146-3.4699707 C17.8087769,1.1399536,15.0406494,0,12,0C7.392395,0,3.3966675,2.5999146,1.3858032,6.4098511l4.0444336,3.1929321 C6.4099731,6.9193726,8.977478,5,12,5z" 100 fill="#F44336" 101 ></path> 102 <path 103 d="M23.8960571,13.5018311C23.9585571,13.0101929,24,12.508667,24,12 c0-0.8578491-0.093689-1.6931763-0.2647705-2.5H12v5h6.4862061c-0.5247192,1.3637695-1.4589844,2.5177612-2.6481934,3.319458 l4.0594482,3.204834C22.0493774,19.135437,23.5219727,16.4903564,23.8960571,13.5018311z" 104 fill="#2196F3" 105 ></path> 106 <path 107 d="M5,12c0-0.8434448,0.1568604-1.6483765,0.4302368-2.3972168L1.3858032,6.4098511 C0.5043335,8.0800171,0,9.9801636,0,12c0,1.9972534,0.4950562,3.8763428,1.3582153,5.532959l4.0495605-3.1970215 C5.1484375,13.6044312,5,12.8204346,5,12z" 108 fill="#FFC107" 109 ></path> 110 <path 111 d="M12,19c-3.0455322,0-5.6295776-1.9484863-6.5922241-4.6640625L1.3582153,17.532959 C3.3592529,21.3734741,7.369812,24,12,24c3.027771,0,5.7887573-1.1248169,7.8974609-2.975708l-4.0594482-3.204834 C14.7412109,18.5588989,13.4284058,19,12,19z" 112 fill="#00B060" 113 ></path> 114 <path 115 opacity=".1" 116 d="M12,23.75c-3.5316772,0-6.7072754-1.4571533-8.9524536-3.7786865C5.2453613,22.4378052,8.4364624,24,12,24 c3.5305786,0,6.6952515-1.5313721,8.8881226-3.9592285C18.6495972,22.324646,15.4981079,23.75,12,23.75z" 117 ></path> 118 <polygon 119 opacity=".1" 120 points="12,14.25 12,14.5 18.4862061,14.5 18.587492,14.25" 121 ></polygon> 122 <path 123 d="M23.9944458,12.1470337C23.9952393,12.0977783,24,12.0493774,24,12 c0-0.0139771-0.0021973-0.0274658-0.0022583-0.0414429C23.9970703,12.0215454,23.9938965,12.0838013,23.9944458,12.1470337z" 124 fill="#E6E6E6" 125 ></path> 126 <path 127 opacity=".2" 128 d="M12,9.5v0.25h11.7855721c-0.0157471-0.0825195-0.0329475-0.1680908-0.0503426-0.25H12z" 129 fill="#FFF" 130 ></path> 131 <linearGradient 132 gradientUnits="userSpaceOnUse" 133 y2="12" 134 y1="12" 135 x2="24" 136 x1="0" 137 id="LxT-gk5MfRc1Gl_4XsNKba_xoyhGXWmHnqX_gr1" 138 > 139 <stop stop-opacity=".2" stop-color="#fff" offset="0"></stop> 140 <stop stop-opacity="0" stop-color="#fff" offset="1"></stop> 141 </linearGradient> 142 <path 143 d="M23.7352295,9.5H12v5h6.4862061C17.4775391,17.121582,14.9771729,19,12,19 c-3.8659668,0-7-3.1340332-7-7c0-3.8660278,3.1340332-7,7-7c1.4018555,0,2.6939087,0.4306641,3.7885132,1.140686 c0.1675415,0.1088867,0.3403931,0.2111206,0.4978027,0.333374l3.637146-3.4699707L19.8414307,2.940979 C17.7369385,1.1170654,15.00354,0,12,0C5.3725586,0,0,5.3725586,0,12c0,6.6273804,5.3725586,12,12,12 c6.1176758,0,11.1554565-4.5812378,11.8960571-10.4981689C23.9585571,13.0101929,24,12.508667,24,12 C24,11.1421509,23.906311,10.3068237,23.7352295,9.5z" 144 fill="url(#LxT-gk5MfRc1Gl_4XsNKba_xoyhGXWmHnqX_gr1)" 145 ></path> 146 <path 147 opacity=".1" 148 d="M15.7885132,5.890686C14.6939087,5.1806641,13.4018555,4.75,12,4.75c-3.8659668,0-7,3.1339722-7,7 c0,0.0421753,0.0005674,0.0751343,0.0012999,0.1171875C5.0687437,8.0595093,8.1762085,5,12,5 c1.4018555,0,2.6939087,0.4306641,3.7885132,1.140686c0.1675415,0.1088867,0.3403931,0.2111206,0.4978027,0.333374 l3.637146-3.4699707l-3.637146,3.2199707C16.1289062,6.1018066,15.9560547,5.9995728,15.7885132,5.890686z" 149 ></path> 150 <path 151 opacity=".2" 152 d="M12,0.25c2.9750366,0,5.6829224,1.0983887,7.7792969,2.8916016l0.144165-0.1375122 l-0.110014-0.0958166C17.7089558,1.0843592,15.00354,0,12,0C5.3725586,0,0,5.3725586,0,12 c0,0.0421753,0.0058594,0.0828857,0.0062866,0.125C0.0740356,5.5558472,5.4147339,0.25,12,0.25z" 153 fill="#FFF" 154 ></path> 155 </svg> 156 <span class="ml-2">Sign up with Google</span> 157 </button> 158 <button 159 class="flex items-center justify-center py-2 px-20 bg-white hover:bg-gray-200 focus:ring-blue-500 focus:ring-offset-blue-200 text-gray-700 w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg mt-4" 160 > 161 <svg 162 viewBox="0 0 30 30" 163 height="30" 164 width="30" 165 y="0px" 166 x="0px" 167 xmlns="http://www.w3.org/2000/svg" 168 > 169 <path 170 d="M25.565,9.785c-0.123,0.077-3.051,1.702-3.051,5.305c0.138,4.109,3.695,5.55,3.756,5.55 c-0.061,0.077-0.537,1.963-1.947,3.94C23.204,26.283,21.962,28,20.076,28c-1.794,0-2.438-1.135-4.508-1.135 c-2.223,0-2.852,1.135-4.554,1.135c-1.886,0-3.22-1.809-4.4-3.496c-1.533-2.208-2.836-5.673-2.882-9 c-0.031-1.763,0.307-3.496,1.165-4.968c1.211-2.055,3.373-3.45,5.734-3.496c1.809-0.061,3.419,1.242,4.523,1.242 c1.058,0,3.036-1.242,5.274-1.242C21.394,7.041,23.97,7.332,25.565,9.785z M15.001,6.688c-0.322-1.61,0.567-3.22,1.395-4.247 c1.058-1.242,2.729-2.085,4.17-2.085c0.092,1.61-0.491,3.189-1.533,4.339C18.098,5.937,16.488,6.872,15.001,6.688z" 171 ></path> 172 </svg> 173 <span class="ml-2">Sign up with Apple</span> 174 </button> 175 </div> 176 </div> 177 <div class="mt-5"> 178 <button 179 class="py-2 px-4 bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg" 180 type="submit" 181 > 182 Sign up 183 </button> 184 </div> 185 <div class="flex items-center justify-between mt-4"> 186 <span class="w-1/5 border-b dark:border-gray-600 md:w-1/4"></span> 187 <a 188 class="text-xs text-gray-500 uppercase dark:text-gray-400 hover:underline" 189 href="#" 190 >have an account? Log in</a 191 > 192 <span class="w-1/5 border-b dark:border-gray-600 md:w-1/4"></span> 193 </div> 194 </div> 195 </div> 196</div> 197
675 views
675 views
MIT License