Tabs

npx npix@latest add Tabs

<>
  <Tabs className="w-[400px]">
    <div data-label="Sign in">
      <Card className="space-y-4 p-6">
        <CardTitle>
          Sign in
        </CardTitle>
        <CardDescription>
          Use your account
        </CardDescription>
        <div className="space-y-2">
          <label htmlFor="email">
            Email
          </label>
          <Input
            id="email"
            placeholder="Email"
            type="email"
          />
          <a
            className="text-sm text-indigo-400"
            href="#"
          >
            Forgot email?
          </a>
        </div>
        <div className="space-y-2">
          <label htmlFor="password">
            Password
          </label>
          <Input
            id="password"
            placeholder="Password"
            type="password"
          />
          <a
            className="text-sm text-indigo-400"
            href="#"
          >
            Forgot password?
          </a>
        </div>
        <div>
          <Button>
            Sign in
          </Button>
        </div>
      </Card>
    </div>
    <div data-label="Register">
      <Card className="space-y-4 p-6">
        <CardTitle>
          Register
        </CardTitle>
        <CardDescription>
          Fill in the form below to create your account.
        </CardDescription>
        <div className="space-y-2">
          <label htmlFor="email">
            Email
          </label>
          <Input
            id="email"
            placeholder="Email"
            type="email"
          />
        </div>
        <div className="space-y-2">
          <label htmlFor="password">
            Password
          </label>
          <Input
            id="password"
            placeholder="Password"
            type="password"
          />
        </div>
        <div className="space-y-2">
          <label htmlFor="cpassword">
            Confirm password
          </label>
          <Input
            id="cpassword"
            placeholder="Confirm password"
            type="password"
          />
        </div>
        <div className="space-y-2 text-sm">
          <span className="flex items-center">
            <Checkbox id="terms" />
            <label htmlFor="terms">
              I agree to the Terms and Conditions
            </label>
          </span>
        </div>
        <div>
          <Button>
            Sign in
          </Button>
        </div>
      </Card>
    </div>
  </Tabs>
</>