103 lines
3.8 KiB
JavaScript
103 lines
3.8 KiB
JavaScript
import React from "react";
|
|
import logo from "../../assets/logo.png";
|
|
import Logo from "../../components/Logo";
|
|
|
|
const Register = () => {
|
|
return (
|
|
<div className="w-full">
|
|
<div className="w-[400px] mx-auto bg-gray-100 pb-2 my-9 border border-zinc-500">
|
|
<form>
|
|
<div className="w-full p-3 flex justify-center text-white text-lg bg-darkBrown">
|
|
<Logo />
|
|
</div>
|
|
<div>
|
|
<h3 className="w-full text-lg py-2 font-titleFont italic text-center">
|
|
Register
|
|
</h3>
|
|
</div>
|
|
<div className="flex py-2">
|
|
<div className="px-2 flex flex-col gap-2">
|
|
<label className="text-sm" htmlFor="first">
|
|
First Name
|
|
</label>
|
|
<input
|
|
name="first"
|
|
required
|
|
className="w-full py-1 px-2 border border-zinc-400 text-base rounded-sm outline-none focus-within:border-green focus-within:shadow-input lowercase duration-100"
|
|
type="text"
|
|
/>
|
|
</div>
|
|
<div className="px-2 flex flex-col gap-2">
|
|
<label className="text-sm" htmlFor="last">
|
|
Last Name
|
|
</label>
|
|
<input
|
|
name="last"
|
|
required
|
|
className="w-full py-1 px-2 border border-zinc-400 text-base rounded-sm outline-none focus-within:border-green focus-within:shadow-input lowercase duration-100"
|
|
type="text"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex py-2">
|
|
<div className="px-2 flex flex-col gap-2">
|
|
<label className="text-sm" htmlFor="email">
|
|
Email Address
|
|
</label>
|
|
<input
|
|
name="email"
|
|
required
|
|
className="w-full py-1 px-2 border border-zinc-400 text-base rounded-sm outline-none focus-within:border-green focus-within:shadow-input lowercase duration-100"
|
|
type="email"
|
|
/>
|
|
</div>
|
|
<div className="px-2 flex flex-col gap-2">
|
|
<label className="text-sm" htmlFor="re-email">
|
|
Reenter Email Address
|
|
</label>
|
|
<input
|
|
name="re-email"
|
|
required
|
|
className="w-full py-1 px-2 border border-zinc-400 text-base rounded-sm outline-none focus-within:border-green focus-within:shadow-input lowercase duration-100"
|
|
type="email"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex py-2">
|
|
<div className="px-2 flex flex-col gap-2">
|
|
<label className="text-sm" htmlFor="password">
|
|
Enter Password
|
|
</label>
|
|
<input
|
|
name="password"
|
|
required
|
|
className="w-full py-1 px-2 border border-zinc-400 text-base rounded-sm outline-none focus-within:border-green focus-within:shadow-input duration-100"
|
|
type="password"
|
|
/>
|
|
</div>
|
|
<div className="px-2 flex flex-col gap-2">
|
|
<label className="text-sm" htmlFor="re-password">
|
|
Reenter Password
|
|
</label>
|
|
<input
|
|
name="re-password"
|
|
required
|
|
className="w-full py-1 px-2 border border-zinc-400 text-base rounded-sm outline-none focus-within:border-green focus-within:shadow-input duration-100"
|
|
type="password"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end p-2">
|
|
<button className="px-2 py-1 bg-green text-white hover:text-black rounded-md hover:bg-sky_blue">
|
|
Register
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Register;
|