Form by themrsami
#e8e8e8
HTML +TailwindCSS
1<div class="mx-auto max-w-[432px] bg-white rounded-md shadow-lg drop-shadow-md"> 2 <div class="px-4 py-3 flex justify-between"> 3 <div> 4 <h2 class="font-bold" style="font-size: 32px">Sign Up</h2> 5 <p class="text-gray-500" style="font-size: 15px">It's quick and easy.</p> 6 </div> 7 <div style="cursor: pointer" class="text-gray-600"> 8 <svg 9 xmlns="http://www.w3.org/2000/svg" 10 class="h-7 w-7" 11 fill="none" 12 viewBox="0 0 24 24" 13 stroke="currentColor" 14 > 15 <path 16 stroke-linecap="round" 17 stroke-linejoin="round" 18 stroke-width="3" 19 d="M6 18L18 6M6 6l12 12" 20 ></path> 21 </svg> 22 </div> 23 </div> 24 <hr class="bg-gray-600" /> 25 <div class="px-4 pt-3 pb-6 space-y-3"> 26 <div class="space-x-3 flex"> 27 <input 28 type="text" 29 placeholder="First name" 30 class="flex-1 ring-1 ring-gray-400 rounded-md text-md px-2 py-2 outline-none bg-gray-100 focus:placeholder-gray-500" 31 /> 32 <input 33 type="text" 34 placeholder="Surname" 35 class="flex-1 ring-1 ring-gray-400 rounded-md text-md px-2 py-2 outline-none bg-gray-100 focus:placeholder-gray-500" 36 /> 37 </div> 38 <div> 39 <input 40 type="text" 41 placeholder="Mobile number or email address" 42 class="w-full ring-1 ring-gray-400 rounded-md text-md px-2 py-2 outline-none bg-gray-100 focus:placeholder-gray-500" 43 /> 44 </div> 45 <div> 46 <input 47 type="password" 48 placeholder="New password" 49 class="w-full ring-1 ring-gray-400 rounded-md text-md px-2 py-2 outline-none bg-gray-100 focus:placeholder-gray-500" 50 /> 51 </div> 52 <div> 53 <div class="text-gray-500" style="font-size: 12px;"> 54 Date of birth <a href=""> (?) </a> 55 </div> 56 <div class="mt-1 flex space-x-3"> 57 <select 58 name="day" 59 class="text-md flex-1 px-1 py-1.5 ring-1 ring-gray-400 rounded-md outline-none" 60 > 61 <option>1</option> 62 <option>2</option> 63 <option>3</option> 64 <option>4</option> 65 <option>5</option> 66 <option>6</option> 67 <option>7</option> 68 <option>8</option> 69 <option>9</option> 70 <option>10</option> 71 <option>11</option> 72 <option>12</option> 73 <option>13</option> 74 <option>14</option> 75 <option>15</option> 76 <option>16</option> 77 <option>17</option> 78 <option>18</option> 79 <option>19</option> 80 <option>20</option> 81 <option>21</option> 82 <option>22</option> 83 <option>23</option> 84 <option>24</option> 85 <option>25</option> 86 <option>26</option> 87 <option>27</option> 88 <option>28</option> 89 <option>29</option> 90 <option>30</option> 91 <option>31</option> 92 </select> 93 <select 94 name="month" 95 class="text-md flex-1 px-1 py-1.5 ring-1 ring-gray-400 rounded-md outline-none" 96 > 97 <option>January</option> 98 <option>February</option> 99 <option>March</option> 100 <option>April</option> 101 <option>May</option> 102 <option>June</option> 103 <option>July</option> 104 <option>August</option> 105 <option>September</option> 106 <option>October</option> 107 <option>November</option> 108 <option>December</option> 109 </select> 110 <select 111 name="year" 112 class="text-md flex-1 px-1 py-1.5 ring-1 ring-gray-400 rounded-md outline-none" 113 > 114 <option>1990</option> 115 <option>1991</option> 116 <option>1992</option> 117 <option>1993</option> 118 <option>1994</option> 119 <option>1995</option> 120 <option>1996</option> 121 <option>1997</option> 122 <option>1998</option> 123 <option>1999</option> 124 <option>2000</option> 125 <option>2001</option> 126 <option>2002</option> 127 <option>2003</option> 128 <option>2004</option> 129 <option>2005</option> 130 <option>2006</option> 131 <option>2007</option> 132 <option>2008</option> 133 <option>2009</option> 134 <option>2010</option> 135 <option>2011</option> 136 <option>2012</option> 137 <option>2013</option> 138 <option>2014</option> 139 <option>2015</option> 140 <option>2016</option> 141 <option>2017</option> 142 <option>2018</option> 143 <option>2019</option> 144 <option>2020</option> 145 <option>2021</option> 146 <option>2022</option> 147 <option>2023</option> 148 </select> 149 </div> 150 </div> 151 <div> 152 <div class="text-gray-500" style="font-size: 12px;"> 153 Gender <a href=""> (?) </a> 154 </div> 155 <div class="mt-1 flex space-x-3"> 156 <label 157 for="female" 158 class="flex-1 flex space-x-2 justify-between items-center rounded-md px-2 py-1 border border-gray-400" 159 > 160 <span>Female</span> 161 <input type="radio" id="female" name="gender" /> 162 </label> 163 <label 164 for="male" 165 class="flex-1 flex space-x-2 justify-between items-center rounded-md px-2 py-1 border border-gray-400" 166 > 167 <span>Male</span> 168 <input type="radio" id="male" name="gender" /> 169 </label> 170 <label 171 for="other" 172 class="flex-1 flex space-x-2 justify-between items-center rounded-md px-2 py-1 border border-gray-400" 173 > 174 <span>Custom</span> 175 <input type="radio" id="other" name="gender" /> 176 </label> 177 </div> 178 </div> 179 <div> 180 <p class="text-gray-600" style="font-size: 11px"> 181 People who use our service may have uploaded your contact information to 182 Facebook. 183 <a href="" class="hover:text-blue-900 font-medium hover:underline" 184 >Learn more</a 185 >. 186 </p> 187 <p class="text-gray-600 mt-4" style="font-size: 11px"> 188 By clicking Sign Up, you agree to our 189 <a href="" class="hover:text-blue-900 font-medium hover:underline" 190 >Terms</a 191 >, 192 <a href="" class="hover:text-blue-900 font-medium hover:underline" 193 >Privacy Policy</a 194 > 195 and 196 <a href="" class="hover:text-blue-900 font-medium hover:underline" 197 >Cookies Policy</a 198 >. You may receive SMS notifications from us and can opt out at any 199 time. 200 </p> 201 </div> 202 <div class="text-center"> 203 <button 204 class="text-white font-bold px-16 py-1 rounded-md" 205 style="background-color: #00A400; font-size: 18px;" 206 > 207 Sign Up 208 </button> 209 </div> 210 </div> 211</div> 212
738 views
738 views
MIT License