Form by themrsami
#212121
HTML +TailwindCSS
1<div class="flex flex-col items-center justify-center h-screen dark"> 2 <div class="w-full max-w-md bg-gray-800 rounded-lg shadow-md p-6"> 3 <h2 class="text-2xl font-bold text-gray-200 mb-4">Sign Up</h2> 4 <form class="flex flex-col"> 5 <div class="flex space-x-4 mb-4"> 6 <input 7 placeholder="First Name" 8 class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 w-1/2 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" 9 type="text" 10 /> 11 <input 12 placeholder="Last Name" 13 class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 w-1/2 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" 14 type="text" 15 /> 16 </div> 17 <input 18 placeholder="Email" 19 class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" 20 type="email" 21 /> 22 <input 23 placeholder="Confirm Email" 24 class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" 25 type="email" 26 /> 27 <input 28 placeholder="Password" 29 class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" 30 type="password" 31 /> 32 <input 33 placeholder="Confirm Password" 34 class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" 35 type="password" 36 /> 37 <label class="text-sm mb-2 text-gray-200 cursor-pointer" for="gender"> 38 Gender 39 </label> 40 <select 41 class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-4 focus:bg-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150" 42 id="gender" 43 > 44 <option value="male">Male</option> 45 <option value="female">Female</option> 46 <option value="other">Other</option> 47 </select> 48 <label class="text-sm mb-2 text-gray-200 cursor-pointer" for="age"> 49 Age 50 </label> 51 <input 52 class="bg-gray-700 text-gray-200 border-0 rounded-md p-2" 53 id="age" 54 type="date" 55 /> 56 <p class="text-white mt-4"> 57 Already have an account? 58 <a class="text-sm text-blue-500 -200 hover:underline mt-4" href="#" 59 >Login</a 60 > 61 </p> 62 <button 63 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" 64 type="submit" 65 > 66 Sign Up 67 </button> 68 </form> 69 </div> 70</div> 71
2K views
2K views
MIT License