Login with Email and Password

1'use client';
2 
3import { Button } from '@/components/ui/button';
4import { Input } from '@/components/ui/input';
5import { Label } from '@/components/ui/label';
6 
7export default function Login03() {
8  return (
9    <div className="flex min-h-dvh items-center justify-center">
10      <div className="flex flex-1 flex-col justify-center px-4 py-10 lg:px-6">
11        <div className="sm:mx-auto sm:w-full sm:max-w-sm">
12          <h3 className="text-balance text-center font-semibold text-foreground text-lg dark:text-foreground">
13            Welcome Back
14          </h3>
15          <p className="text-pretty text-center text-muted-foreground text-sm dark:text-muted-foreground">
16            Enter your credentials to access your account.
17          </p>
18          <form action="#" className="mt-6 space-y-4" method="post">
19            <div>
20              <Label
21                className="font-medium text-foreground text-sm dark:text-foreground"
22                htmlFor="email-login-03"
23              >
24                Email
25              </Label>
26              <Input
27                autoComplete="email"
28                className="mt-2"
29                id="email-login-03"
30                name="email-login-03"
31                placeholder="ephraim@blocks.so"
32                type="email"
33              />
34            </div>
35            <div>
36              <Label
37                className="font-medium text-foreground text-sm dark:text-foreground"
38                htmlFor="password-login-03"
39              >
40                Password
41              </Label>
42              <Input
43                autoComplete="password"
44                className="mt-2"
45                id="password-login-03"
46                name="password-login-03"
47                placeholder="**************"
48                type="password"
49              />
50            </div>
51            <Button className="mt-4 w-full py-2 font-medium" type="submit">
52              Sign in
53            </Button>
54          </form>
55          <p className="mt-6 text-pretty text-muted-foreground text-sm dark:text-muted-foreground">
56            Forgot your password?{' '}
57            <a
58              className="font-medium text-primary hover:text-primary/90 dark:text-primary dark:hover:text-primary/90"
59              href="#"
60            >
61              Reset password
62            </a>
63          </p>
64        </div>
65      </div>
66    </div>
67  );
68}