Github Link
import { useState } from "react";
export default function Register() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const submit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log({
name,
email,
password,
confirmPassword,
});
};
return (
<div className="flex flex-col justify-center sm:h-screen p-4">
<div className="max-w-md w-full mx-auto border border-gray-300 rounded-2xl p-8">
<div className="text-center mb-12">
<a href="#">
<img
src="https://readymadeui.com/readymadeui.svg"
alt="logo"
className="w-40 inline-block"
/>
</a>
</div>
<form onSubmit={submit}>
<div className="space-y-6">
<div>
<label
htmlFor="name"
className="text-slate-900 text-sm font-medium mb-2 block"
>
Name
</label>
<input
id="name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="text-slate-900 bg-white border border-gray-300 w-full text-sm px-4 py-3 rounded-md outline-blue-500"
placeholder="Enter Name"
/>
</div>
<div>
<label
htmlFor="email"
className="text-slate-900 text-sm font-medium mb-2 block"
>
Email
</label>
<input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="text-slate-900 bg-white border border-gray-300 w-full text-sm px-4 py-3 rounded-md outline-blue-500"
placeholder="Enter email"
/>
</div>
<div>
<label
htmlFor="password"
className="text-slate-900 text-sm font-medium mb-2 block"
>
Password
</label>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="text-slate-900 bg-white border border-gray-300 w-full text-sm px-4 py-3 rounded-md outline-blue-500"
placeholder="Enter password"
/>
</div>
<div>
<label
htmlFor="confirm_password"
className="text-slate-900 text-sm font-medium mb-2 block"
>
Confirm Password
</label>
<input
id="confirm_password"
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className="text-slate-900 bg-white border border-gray-300 w-full text-sm px-4 py-3 rounded-md outline-blue-500"
placeholder="Enter confirm password"
/>
</div>
<div className="flex items-center">
<input
id="remember-me"
type="checkbox"
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
/>
<label
htmlFor="remember-me"
className="text-slate-600 ml-3 block text-sm"
>
I accept the{" "}
<a href="#" className="text-blue-600 font-medium hover:underline">
Terms and Conditions
</a>
</label>
</div>
</div>
<div className="mt-12">
<button
type="submit"
className="w-full py-3 px-4 text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
>
Create an account
</button>
</div>
<p className="text-slate-600 text-sm mt-6 text-center">
Already have an account?
<a href="#" className="text-blue-600 font-medium hover:underline ml-1">
Login here
</a>
</p>
</form>
</div>
</div>
);
}
0 Comments