Form by themrsami
#e8e8e8
HTML +TailwindCSS
1<div class="flex flex-col justify-center py-12 sm:px-6 lg:px-8"> 2 3 <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md"> 4 <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10"> 5 <form method="POST" action="#"> 6 <div> 7 <label class="block text-sm font-medium text-gray-700" for="username"> 8 Username 9 </label> 10 <div class="mt-1"> 11 <input class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="" autocomplete="username" type="text" name="username" id="username"> 12 </div> 13 </div> 14 15 <div class="mt-6"> 16 <label class="block text-sm font-medium text-gray-700" for="email"> 17 Email address 18 </label> 19 <div class="mt-1"> 20 <input class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="" autocomplete="email" type="email" name="email" id="email"> 21 </div> 22 </div> 23 24 <div class="mt-6"> 25 <label class="block text-sm font-medium text-gray-700" for="confirm-email"> 26 Confirm Email address 27 </label> 28 <div class="mt-1"> 29 <input class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="" autocomplete="email" type="email" name="confirm-email" id="confirm-email"> 30 </div> 31 </div> 32 33 <div class="mt-6"> 34 <label class="block text-sm font-medium text-gray-700" for="password"> 35 Password 36 </label> 37 <div class="mt-1"> 38 <input class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="" autocomplete="current-password" type="password" name="password" id="password"> 39 </div> 40 </div> 41 42 <div class="mt-6"> 43 <label class="block text-sm font-medium text-gray-700" for="confirm-password"> 44 Confirm Password 45 </label> 46 <div class="mt-1"> 47 <input class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="" autocomplete="current-password" type="password" name="confirm-password" id="confirm-password"> 48 </div> 49 </div> 50 51 <div class="mt-6"> 52 <label class="block text-sm font-medium text-gray-700" for="dob"> 53 Date of Birth 54 </label> 55 <div class="mt-1"> 56 <input class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="" type="date" name="dob" id="dob"> 57 </div> 58 </div> 59 60 <div class="flex items-center justify-center mt-6"> 61 <span class="mr-3 text-gray-700 font-medium">Gender:</span> 62 <label class="inline-flex items-center"> 63 <input type="radio" class="form-radio h-5 w-5 text-pink-600" name="gender" value="Male"> 64 <span class="ml-2 text-gray-700">Male</span> 65 </label> 66 <label class="inline-flex items-center ml-6"> 67 <input type="radio" class="form-radio h-5 w-5 text-purple-600" name="gender" value="Female"> 68 <span class="ml-2 text-gray-700">Female</span> 69 </label> 70</div> 71 72 73 74 <div class="mt-6 flex items-center justify-between"> 75 <div class="flex items-center"> 76 <input class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" type="checkbox" name="terms-and-condition" id="terms-and-condition"> 77 <label class="ml-2 block text-sm text-gray-900" for="terms-and-condition"> 78 I agree to the terms and conditions 79 </label> 80 </div> 81 </div> 82 83 <div class="mt-6"> 84 <button class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" type="submit"> 85 Sign up 86 </button> 87 </div> 88 </form> 89 </div> 90 </div> 91</div> 92
1.5K views
1.5K views
MIT License