Form by themrsami
#e8e8e8
HTML +TailwindCSS
1<div class="flex flex-col items-center justify-center h-screen"> 2 <div class="w-full max-w-md bg-white rounded-lg shadow-md p-6"> 3 <h2 class="text-2xl font-bold text-gray-900 mb-4">Sign Up</h2> 4 <form class="flex flex-col"> 5 <input placeholder="First Name" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="text"> 6 <input placeholder="Last Name" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="text"> 7 <input placeholder="Email" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="email"> 8 <input placeholder="Confirm Email" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="email"> 9 <input placeholder="Password" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="password"> 10 <input placeholder="Confirm Password" class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" type="password"> 11 <label class="text-sm mb-2 text-gray-900 cursor-pointer" for="gender"> 12 Gender 13 </label> 14 <select class="bg-gray-100 text-gray-900 border-0 rounded-md p-2 mb-4 focus:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" id="gender"> 15 <option value="male">Male</option> 16 <option value="female">Female</option> 17 <option value="other">Other</option> 18 </select> 19 <label class="text-sm mb-2 text-gray-900 cursor-pointer" for="age"> 20 Age 21 </label> 22 <input class="bg-gray-100 text-gray-900 border-0 rounded-md p-2" id="age" type="date"> 23 <p class="text-gray-900 mt-4"> Already have an account? <a class="text-sm text-blue-500 -200 hover:underline mt-4" href="#">Login</a></p> 24 <button class="bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-bold py-2 px-4 rounded-md mt-4 hover:bg-indigo-600 hover:to-blue-600 transition ease-in-out duration-150" type="submit">Sign Up</button> 25 </form> 26 </div> 27</div> 28
1.5K views
1.5K views
MIT License