<div>
<body class="m-0 p-0 h-fit justify-center items-center min-h-screen font-['Jost',sans-serif] bg-gradient-to-b from-[#0F0C29] via-[#302B63] to-[#24243E] overflow-hidden flex">
<div class="main w-[350px] h-[580px] bg-red-600 overflow-hidden rounded-[10px] shadow-[5px_20px_50px_rgb(0,0,0)] bg-[url('C:\Users\Althaf\Desktop\Worxa\frontend\src\components\icon\FormBackground.jpg')]">
<input class="hidden" type="checkbox" id="chk" aria-hidden="true"></input>
<div class="signup relative w-[100%] h-[100%]">
<form onSubmit={onSubmit}>
<label class="text-[#fff] text-[2.3em] justify-center flex m-[25px] font-bold cursor-pointer transition duration-300 ease-in-out" for="chk" aria-hidden="true">Sign up</label>
<input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="text" placeholder="Name" name='name' id='name' required="" value={name} onChange={onChange} />
<input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="date"placeholder="Date of Birth" required="" name='dob'id='dob' value={dob} onChange={onChange} />
<input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="tel" placeholder="Phone Number" name='phone' id='phone' required="" value={phone} onChange={onChange} />
<input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="email" placeholder="Email" name='email' id = 'email' required="" value={email} onChange={onChange} />
<select class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="text" placeholder="Location" name='location' id = 'location' required="" value={location} onChange={onChange} >
<option value="" selected disabled hidden>Select an Option</option>
{
locations.map((location,i)=>{
return(
<option>{location.city}</option>
)
})
}
</select>
<input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="Password" placeholder="Password" name='password' id='password' required="" value={password} onChange={onChange}/>
<input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="password" placeholder="Confirm Password" name='ConfirmPassword' id='Confirm Password' required="" value={ConfirmPassword} onChange={onChange}/>
<button class="w-[60%] h-[35px] bg-[#573b8a] justify-center block my-[10px] mx-auto p-[10px] font-bold text-[1em] mt-[20px] border-none outline-none rounded-[5px] transition ease-in duration-[0.2s] cursor-pointer hover:bg-[#6d44b8] text-[#fff]">Sign up</button>
</form>
</div>
</div>
</body>
</div>
I'm trying to design a registration page using tailwind css, but when I use the flex align items to center property, the entire form is centered and a vertical scroll bar appears, and I can't remove the vertical scroll. It would be great if someone could provide some way to solve this problem.
P粉3005417982023-09-13 13:02:05
I can't find the scrollbar. Although, you can hide the scrollbars by adding this utility in the index.css file.
@layer utilities {
/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}
Then you just need to add the no-scrollbar class in the div you want.