<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>