Form by SmookyDev
#e8e8e8
HTML +TailwindCSS
1<div 2 class="form w-[300px] rounded-md shadow-xl overflow-hidden z-[100] relative cursor-pointer snap-start shrink-0 py-5 px-6 bg-[#DFA16A] r flex flex-col items-center justify-center gap-3 transition-all duration-300" 3> 4 <p 5 class="text-[#A15A3E] translate-x-[46%] -rotate-90 tracking-[20px] transition-all hover:translate-x-[50%] -translate-y-1/2 font-semibold text-2xl absolute right-0" 6 > 7 Welcome 8 </p> 9 10 <div class="capitalize"> 11 <p class="text-2xl text-[#7F3D27] pb-5">Create Your Account</p> 12 <form action="" class="flex flex-col gap-3"> 13 <div class="flex flex-col items-start w-full"> 14 <label for="name" class="text-sm text-[#7F3D27] font-semibold" 15 >Name</label 16 > 17 <input 18 type="text" 19 placeholder="Enter Your Name" 20 class="w-full py-px pl-0 bg-transparent outline-none focus:ring-0 border-0 border-b-2 border-[#7F3D27] placeholder:text-[#A15A3E] focus:outline-none text-[#7F3D27] placeholder:text-xs" 21 /> 22 </div> 23 24 <div class="flex flex-col items-start w-full"> 25 <label for="email" class="text-sm text-[#7F3D27] font-semibold" 26 >Email</label 27 > 28 <input 29 type="email" 30 placeholder="Enter Your Email" 31 class="w-full py-px pl-0 bg-transparent outline-none focus:ring-0 border-0 border-b-2 border-[#7F3D27] placeholder:text-[#A15A3E] focus:outline-none text-[#7F3D27] placeholder:text-xs" 32 /> 33 </div> 34 35 <div class="flex flex-col items-start w-full"> 36 <label for="password" class="text-sm text-[#7F3D27] font-semibold" 37 >Password</label 38 > 39 <input 40 type="password" 41 placeholder="Enter Your Password" 42 class="w-full py-px pl-0 bg-transparent outline-none focus:ring-0 border-0 border-b-2 border-[#7F3D27] placeholder:text-[#A15A3E] focus:outline-none text-[#7F3D27] placeholder:text-xs" 43 /> 44 </div> 45 46 <div class="inline-flex gap-2 items-center text-[#A15A3E]"> 47 <input 48 type="checkbox" 49 name="" 50 id="" 51 class="w-3 h-3 focus:border-0 focus:outline-none focus:accent-[#7F3D27] checked:accent-[#A15A3E] checked:text-[#A15A3E] px-1 py-1" 52 checked="" 53 /> 54 <p class="text-xs"> 55 By Signing Agree with 56 <span class="font-semibold">Term & Policy</span> 57 </p> 58 </div> 59 60 <div class="inline-flex gap-5"> 61 <button 62 class="px-6 focus:outline-none focus:scale-110 font-semibold text-xs py-2 rounded-[5px] hover:scale-110 transition-all hover:transiton text-[#D9D9D9] bg-[#7F3D27] shadow-[#7F3D27] shadow-lg" 63 > 64 Sign Up 65 </button> 66 <button 67 class="px-6 focus:outline-none focus:scale-110 font-semibold text-xs py-2 rounded-[5px] hover:scale-110 transition-all hover:transiton text-[#7F3D27] bg-[#D9D9D9] shadow-[#7F3D27] shadow-lg" 68 > 69 Sign In 70 </button> 71 </div> 72 </form> 73 </div> 74</div> 75
583 views
583 views
MIT License