Card

1import { Button } from "@/components/ui/button";
2import {
3  Card,
4  CardContent,
5  CardDescription,
6  CardFooter,
7  CardHeader,
8  CardTitle
9} from "@/components/ui/card";
10import { Input } from "@/components/ui/input";
11import { Label } from "@/components/ui/label";
12 
13export default function CardDemo() {
14  return (
15    <Card className="w-full max-w-sm">
16      <CardHeader>
17        <CardTitle>Login to your account</CardTitle>
18        <CardDescription>Enter your email below to login to your account</CardDescription>
19      </CardHeader>
20      <CardContent>
21        <form>
22          <div className="flex flex-col gap-6">
23            <div className="grid gap-2">
24              <Label htmlFor="email">Email</Label>
25              <Input id="email" type="email" placeholder="m@example.com" required />
26            </div>
27            <div className="grid gap-2">
28              <div className="flex items-center">
29                <Label htmlFor="password">Password</Label>
30                <a
31                  href="#"
32                  className="ml-auto inline-block text-xs underline-offset-4 hover:underline">
33                  Forgot your password?
34                </a>
35              </div>
36              <Input id="password" type="password" required />
37            </div>
38          </div>
39        </form>
40      </CardContent>
41      <CardFooter className="flex-col gap-2">
42        <Button type="submit" className="w-full">
43          Login
44        </Button>
45        <Button variant="outline" className="w-full">
46          Login with Google
47        </Button>
48      </CardFooter>
49    </Card>
50  );
51}