Card

<Card
    className="w-full max-w-md"
    title="Card Title"
    description="This is the card description."
    action={<Button>Action</Button>}
    content={<p>This is the main content of the card.</p>}
    footer={<span className="text-sm text-muted-foreground">Footer text</span>}
  />

<Card
    className="w-full max-w-sm"
    title="Login to your account"
    description="Enter your email below to login to your account"
    action={<Button variant="link-color">Sign Up</Button>}
    content={
        <form>
            <div className="flex flex-col gap-6">
                <div className="grid gap-2">
                    <Label htmlFor="email">Email</Label>
                    <Input
                        id="email"
                        type="email"
                        placeholder="m@example.com"
                        required
                    />
                </div>
                <div className="grid gap-2">
                    <div className="flex items-center">
                        <Label htmlFor="password">Password</Label>
                        <a
                            href="#"
                            className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                        >
                            Forgot your password?
                        </a>
                    </div>
                    <Input id="password" type="password" required />
                </div>
            </div>
        </form>
    }
    footer={
        <div className="flex flex-col gap-2 w-full">
            <Button type="submit" className="w-full">
                Login
            </Button>
            <Button variant="secondary" className="w-full">
                Login with Google
            </Button>
        </div>
    }
/>