<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>
我正在嘗試使用tailwind css設計一個註冊頁面，但是當我使用flex align items to center屬性時，整個表單會居中顯示，並出現垂直滾動條，我無法去除垂直滾動。如果有人能提供一些方法來解決這個問題，那將會非常好。
我無法找到滾動條。雖然，你可以透過在
index.css檔案中加入這個實用程式來隱藏滾動條。@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 */ } }然後你只需要在你想要的div中加入
no-scrollbar類別。