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">Contact Form</h2> 4 5 <form class="flex flex-wrap"> 6 <input 7 type="text" 8 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 w-full md:w-[48%] mr-[2%]" 9 placeholder="Full Name" 10 /> 11 <input 12 type="email" 13 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 w-full md:w-[48%] ml-[2%]" 14 placeholder="Email" 15 /> 16 <input 17 type="number" 18 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 w-full md:w-[48%] mr-[2%]" 19 placeholder="Phone Number" 20 /> 21 <input 22 type="text" 23 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 w-full md:w-[48%] ml-[2%]" 24 placeholder="Company Name" 25 /> 26 <input 27 type="text" 28 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 w-full md:w-[48%] mr-[2%]" 29 placeholder="Job Title" 30 /> 31 <input 32 type="date" 33 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 w-full md:w-[48%] ml-[2%]" 34 placeholder="Date of Birth" 35 /> 36 <textarea 37 name="message" 38 class="bg-gray-700 text-gray-200 border-0 rounded-md p-2 mb-auto md:mb-auto md:w-full md:h-auto md:min-h-[100px] md:max-h-[100px] md:flex-grow md:flex-shrink md:flex-auto focus:bg-gray-md:focus:outline-none:focus:ring-blue-md:focus:border-transparent transition ease-in-out duration-fastest" 39 placeholder="Message" 40 ></textarea> 41 42 <button 43 type="submit" 44 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" 45 > 46 Submit 47 </button> 48 </form> 49 </div> 50</div> 51
1.4K views
1.4K views
MIT License