Forms Examples

Login and Sign Up page examples built with Tailus UI React

Login Example 1 / Forms

A simple login form with social login buttons wrapped in a card.

import Card from '@tailus-ui/Card';
import Button from '@tailus-ui/Button';
import { Text, Link, Caption, Title } from '@tailus-ui/typography';
import Input from '@tailus-ui/Input';
import Label from '@tailus-ui/Label';
import Separator from '@tailus-ui/Separator';
import { Google, Microsoft } from './icons';

export function LoginExample1() {
    return (
        <main className="inset-0 z-10 m-auto h-fit max-w-md px-6 py-12 lg:absolute">
            <Card className="relative h-fit p-1 shadow-xl shadow-gray-950/10" variant="mixed">
                <div data-rounded="large" className="p-10">
                    <div>
                        <Title size="xl" className="mb-1">
                            Sign In to Tailus UI
                        </Title>
                        <Text className="my-0" size="sm">
                            Welcome back! Sign in to continue
                        </Text>
                    </div>

                    <div className="mt-6 grid grid-cols-2 gap-3">
                        <Button.Root variant="outlined" intent="gray" size="sm" className="w-full">
                            <Button.Icon type="leading" size="xs">
                                <Google />
                            </Button.Icon>
                            <Button.Label>Google</Button.Label>
                        </Button.Root>
                        <Button.Root variant="outlined" intent="gray" size="sm" className="w-full">
                            <Button.Icon type="leading" size="xs">
                                <Microsoft />
                            </Button.Icon>
                            <Button.Label>Microsoft</Button.Label>
                        </Button.Root>
                    </div>

                    <form className="mx-auto mt-8 space-y-6">
                        <div className="space-y-6 rounded-[--btn-radius] shadow-sm shadow-gray-500/5">
                            <div className="relative my-6 grid items-center gap-3 [grid-template-columns:1fr_auto_1fr]">
                                <Separator className="h-px border-b" />
                                <Caption as="span" className="block" size="sm">
                                    Or continue with
                                </Caption>
                                <Separator className="h-px border-b" />
                            </div>

                            <div className="space-y-6">
                                <div className="space-y-2.5">
                                    <Label size="sm" htmlFor="email">
                                        Your email
                                    </Label>
                                    <Input id="email" name="email" type="email" required variant="outlined" size="md" />
                                </div>
                                <div className="space-y-2.5">
                                    <div className="flex items-center justify-between">
                                        <Label size="sm" htmlFor="password">
                                            Password
                                        </Label>
                                        <Link href="#" size="sm">
                                            Forgot your Password ?
                                        </Link>
                                    </div>
                                    <Input id="password" name="password" type="password" required variant="outlined" size="md" />
                                </div>
                            </div>
                        </div>

                        <Button.Root className="w-full">
                            <Button.Label>Sign In</Button.Label>
                        </Button.Root>
                    </form>
                </div>

                <Card variant="soft" data-shade="925" className="rounded-[calc(var(--card-radius)-0.25rem)] dark:bg-gray-925">
                    <Caption className="my-0" size="sm" align="center">
                        Don't have an account ?{' '}
                        <Link intent="neutral" size="sm" variant="underlined" href="/examples/forms/register1">
                            Create account
                        </Link>
                    </Caption>
                </Card>
            </Card>
        </main>
    );
}

Login Example 2 / Forms

Page with social buttons and a background image on right.

import Card from '@tailus-ui/Card';
import Button from '@tailus-ui/Button';
import { Text, Link, Caption, Title } from '@tailus-ui/typography';
import Input from '@tailus-ui/Input';
import Label from '@tailus-ui/Label';
import Separator from '@tailus-ui/Separator';
import { Google, Microsoft } from './icons';

export function LoginExample2() {
    return (
        <>
            <img className="fixed inset-y-0 right-0 hidden h-screen w-1/2 object-cover object-left lg:block" src="https://images.unsplash.com/photo-1687720657052-c026be7f388c?q=80&w=2785&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
            <main className="inset-0 z-10 m-auto h-fit px-6 py-12 lg:absolute lg:grid lg:w-screen lg:max-w-full lg:grid-cols-2 lg:gap-32 lg:px-0">
                <div>
                    <div className="mx-auto max-w-md lg:ml-auto lg:mr-0 lg:pr-12">
                        <div>
                            <div>

                                // your logo here    

                                <Title size="xl" className="mb-1 mt-12">
                                    Sign In to Tailus UI
                                </Title>
                                <Text className="my-0" size="sm">
                                    Welcome back! Sign in to continue
                                </Text>
                            </div>

                            <div className="mt-8 grid grid-cols-2 gap-3">
                                <Button.Root variant="outlined" intent="gray" size="sm" className="w-full">
                                    <Button.Icon type="leading" size="xs">
                                        <Google />
                                    </Button.Icon>
                                    <Button.Label>Google</Button.Label>
                                </Button.Root>
                                <Button.Root variant="outlined" intent="gray" size="sm" className="w-full">
                                    <Button.Icon type="leading" size="xs">
                                        <Microsoft />
                                    </Button.Icon>
                                    <Button.Label>Microsoft</Button.Label>
                                </Button.Root>
                            </div>

                            <form className="mx-auto mt-8 space-y-6">
                                <div className="space-y-6">
                                    <div className="relative grid items-center gap-3 [grid-template-columns:1fr_auto_1fr]">
                                        <Separator className="h-px border-b" />
                                        <Caption as="span" className="block" size="sm">
                                            Or continue with
                                        </Caption>
                                        <Separator className="h-px border-b" />
                                    </div>
                                    <div className="space-y-4">
                                        <div className="space-y-2.5">
                                            <Label size="sm" htmlFor="email">
                                                Your email
                                            </Label>
                                            <Input id="email" name="email" type="email" required size="md" />
                                        </div>
                                        <div className="space-y-2.5">
                                            <div className="flex items-center justify-between">
                                                <Label size="sm" htmlFor="password">
                                                    Password
                                                </Label>
                                                <Link href="#" size="sm">
                                                    Forgot your Password ?
                                                </Link>
                                            </div>
                                            <Input id="password" name="password" type="password" required size="md" />
                                        </div>
                                    </div>
                                </div>
                                <Button.Root className="w-full">
                                    <Button.Label>Sign In</Button.Label>
                                </Button.Root>
                            </form>
                        </div>

                        <div className="mt-12">
                            <Caption className="my-0" size="sm" align="center">
                                Don't have an account ?{' '}
                                <Link intent="neutral" size="sm" variant="underlined" href="/examples/forms/register3">
                                    Create account
                                </Link>
                            </Caption>
                        </div>
                    </div>
                </div>
            </main>
        </>
    );
}

Login Example 3 / Forms

Login Page with a soft input and next button

import Button from '@tailus-ui/Button';
import { Text, Link, Caption, Title } from '@tailus-ui/typography';
import Input from '@tailus-ui/Input';
import Label from '@tailus-ui/Label';
import Separator from '@tailus-ui/Separator';

export function LoginExample3() {
    return (
        <main className="inset-0 z-10 m-auto h-fit px-6 py-24 lg:absolute lg:w-screen lg:max-w-full lg:px-0 lg:py-12">
            <div className="mx-auto max-w-sm">
                <div>
                    <div>
                        <a href="">
                            // Your logo here
                        </a>

                        <Title size="2xl" className="mb-1 mt-12">
                            Sign In to Tailus UI
                        </Title>

                        <Text className="my-0" size="sm">
                            Welcome back! Sign in to continue
                        </Text>
                    </div>

                    <form className="mx-auto my-8 space-y-6">
                        <div className="space-y-6 rounded-[--btn-radius] shadow-sm shadow-gray-500/5">
                            <div className="space-y-4">
                                <div className="relative">
                                    <Label size="sm" htmlFor="email" className="sr-only">
                                        Your email
                                    </Label>
                                    <Input id="email" name="email" type="email" required size="xl" variant="soft" placeholder="Your email" className="rounded-[calc(var(--btn-radius)+6px)] pr-20" />
                                    <Button.Root intent="neutral" className="absolute inset-y-1.5 right-1.5">
                                        <Button.Label>Next</Button.Label>
                                    </Button.Root>
                                </div>
                            </div>
                        </div>
                    </form>

                    <Caption className="my-0" size="sm">
                        Don't have an account ? {' '}
                        <Link intent="neutral" size="sm" variant="underlined" href="">
                            Create account
                        </Link>
                    </Caption>

                    <Separator fancy className="mb-6 mt-36 md:mt-40 lg:mt-24" />

                    <Caption>By proceeding, you consent to get calls, WhatsApp or SMS messages, including by automated means, from Tailus and its affiliates to the number provided.</Caption>
                </div>
            </div>
        </main>
    );
}

Login Example 4 / Forms

Simple login form wrapped in a card.

import Button from '@tailus-ui/Button';
import { Text, Link, Caption, Title } from '@tailus-ui/typography';
import Input from '@tailus-ui/Input';
import Label from '@tailus-ui/Label';
import Card from '@tailus-ui/Card';

export function LoginExample4() {
    return (
        <main className="relative inset-0 z-10 m-auto h-fit px-6 py-24 lg:absolute lg:w-screen lg:max-w-full lg:px-0 lg:py-12">
            <div className="mx-auto max-w-md">
                <Card variant="mixed" className="mb-20 p-10 shadow-lg shadow-gray-950/5 sm:p-12 dark:border">
                    <div>
                        // Your logo here

                        <Title size="xl" className="mb-1 mt-8">
                            Sign In to Tailus UI
                        </Title>

                        <Text size="sm">
                            Welcome back! Sign in to continue
                        </Text>
                    </div>

                    <form data-shade="800" className="mb-8 space-y-6">
                        <div className="space-y-6 rounded-[--btn-radius] shadow-sm shadow-gray-500/5">
                            <div className="space-y-4">
                                <div className="space-y-2.5">
                                    <Label size="sm" htmlFor="email" className="sr-only">
                                        Your email
                                    </Label>
                                    <Input id="email" name="email" type="email" required variant="bottomOutlined" size="lg" placeholder="Your email" />
                                </div>
                            </div>
                        </div>

                        <Button.Root className="w-full">
                            <Button.Label>Continue</Button.Label>
                        </Button.Root>
                    </form>

                    <Caption className="my-0" size="sm">
                        Don't have an account ? {''}
                        <Link intent="neutral" size="sm" variant="underlined" href="">
                            Create account
                        </Link>
                    </Caption>
                </Card>
                <Caption>By proceeding, you consent to get calls, WhatsApp or SMS messages, including by automated means, from Tailus and its affiliates to the number provided.</Caption>
            </div>
        </main>
    );
}

Sign Up Example 1 / Forms

Sign up form wrapped in a card with features on left

import Button from '@tailus-ui/Button';
import { Text, Link, Caption, Title } from '@tailus-ui/typography';
import Input from '@tailus-ui/Input';
import Label from '@tailus-ui/Label';
import Card from '@tailus-ui/Card';
import { Check } from 'lucide-tailus';
import Avatar from '@tailus-ui/Avatar';
import { Google, Microsoft } from './icons';
import Separator from '@tailus-ui/Separator';

export function Register1() {
    return (
        <main className="z-10 m-auto max-w-lg px-6 py-6 sm:py-12 md:py-20 lg:absolute lg:inset-0 lg:m-auto lg:grid lg:max-w-5xl lg:grid-cols-2 lg:gap-16 lg:px-12 xl:gap-32 xl:px-0">
            <div className="py-6">

                // Your logo

                <div className="my-12 hidden space-y-6 lg:block">
                    <div className="grid gap-3 [grid-template-columns:auto_1fr]">
                        <div className="flex size-6 rounded-full border bg-[--ui-bg]">
                            <Check strokeWidth={3} className="m-auto size-3 text-primary-600 dark:text-primary-400" />
                        </div>

                        <div className="space-y-2">
                            <Title as="span" size="base" weight="medium">
                                Get Started
                            </Title>
                            <Text size="sm">Natus cupiditate iste assumenda, soluta nostrum? Quod voluptate dolor repellat. Accusantium.</Text>
                        </div>
                    </div>

                    <div className="grid gap-3 [grid-template-columns:auto_1fr]">
                        <div className="flex size-6 rounded-full border bg-[--ui-bg]">
                            <Check strokeWidth={3} className="m-auto size-3 text-primary-600 dark:text-primary-400" />
                        </div>

                        <div className="space-y-2">
                            <Title as="span" size="base" weight="medium">
                                Start Build
                            </Title>
                            <Text size="sm">Natus cupiditate iste assumenda, soluta nostrum? Quod voluptate dolor repellat. Accusantium.</Text>
                        </div>
                    </div>

                    <div className="grid gap-3 [grid-template-columns:auto_1fr]">
                        <div className="flex size-6 rounded-full border bg-[--ui-bg]">
                            <Check strokeWidth={3} className="m-auto size-3 text-primary-600 dark:text-primary-400" />
                        </div>

                        <div className="space-y-2">
                            <Title as="span" size="base" weight="medium">
                                Earn
                            </Title>
                            <Text size="sm">Doluta nostrum? Quod voluptate dolor repellat. Accusantium.</Text>
                        </div>
                    </div>
                </div>

                <div data-shade="950" className="hidden border lg:block">
                    <div className="mx-auto max-w-xs p-6">
                        <Text align="center" size="sm">
                            Great work on tailfolio template. This is one of the best personal website that I have seen so far :)
                        </Text>
                    </div>

                    <div className="flex items-center justify-center gap-3 border-t border-gray-950/10 py-3 dark:border-white/5">
                        <Avatar.Root>
                            <Avatar.Image src="https://tailus.io/images/reviews/yucel.webp" />
                            <Avatar.Fallback>YF</Avatar.Fallback>
                        </Avatar.Root>

                        <div className="flex flex-col">
                            <Title as="div" className="text-sm" weight="normal">
                                Yucel Faruksahan
                            </Title>
                            <Caption size="xs">Creator of Tailkits</Caption>
                        </div>
                    </div>
                </div>
            </div>

            <Card className="relative h-fit p-1 shadow-xl shadow-gray-950/10 lg:mb-12" variant="mixed">
                <div data-rounded="large" className="p-10">
                    <div>
                        <Title size="xl" className="mb-1">
                            Welcome to Tailus UI
                        </Title>

                        <Text className="my-0" size="sm">
                            Create an account to continue
                        </Text>
                    </div>

                    <div className="mt-6 grid grid-cols-2 gap-3">
                        <Button.Root variant="outlined" intent="gray" size="sm" className="w-full">
                            <Button.Icon type="leading" size="sm">
                                <Google />
                            </Button.Icon>
                            <Button.Label>Google</Button.Label>
                        </Button.Root>

                        <Button.Root variant="outlined" intent="gray" size="sm" className="w-full">
                            <Button.Icon type="leading" size="sm">
                                <Microsoft />
                            </Button.Icon>
                            <Button.Label>Microsoft</Button.Label>
                        </Button.Root>
                    </div>

                    <form className="mx-auto mt-8 space-y-6">
                        <div className="space-y-6 rounded-[--btn-radius] shadow-sm shadow-gray-500/5">
                            <div className="relative grid items-center gap-3 [grid-template-columns:1fr_auto_1fr]">
                                <Separator />

                                <Caption as="span" className="block" size="sm">
                                    Or continue with
                                </Caption>

                                <Separator />
                            </div>

                            <div className="space-y-6">
                                <div className="grid gap-4 sm:grid-cols-2 sm:gap-3">
                                    <div className="space-y-2.5">
                                        <Label size="sm" htmlFor="firstname">
                                            First name
                                        </Label>
                                        <Input id="firstname" name="firstname" type="text" required variant="outlined" size="md" />
                                    </div>

                                    <div className="space-y-2.5">
                                        <Label size="sm" htmlFor="lastname">
                                            Last name
                                        </Label>
                                        <Input id="lastname" name="lastname" type="text" required variant="outlined" size="md" />
                                    </div>
                                </div>

                                <div className="space-y-2.5">
                                    <Label size="sm" htmlFor="email">
                                        Your email
                                    </Label>
                                    <Input id="email" name="email" type="email" required variant="outlined" size="md" />
                                </div>

                                <div className="space-y-2.5">
                                    <Label size="sm" htmlFor="password">
                                        Password
                                    </Label>
                                    <Input id="password" name="password" type="password" required variant="outlined" size="md" />
                                </div>
                            </div>
                        </div>

                        <Button.Root className="w-full">
                            <Button.Label>Create Account</Button.Label>
                        </Button.Root>
                    </form>
                </div>

                <Card variant="soft" data-shade="925" className="rounded-[calc(var(--card-radius)-0.25rem)] dark:bg-[--ui-bg]">
                    <Caption className="my-0" size="sm" align="center">
                        Already have an account ? {''}
                        <Link intent="neutral" size="sm" variant="underlined" href="">
                            Login
                        </Link>
                    </Caption>
                </Card>
            </Card>
        </main>
    );
}

Sign Up Example 2 / Forms

Featurs on left side and sign up form on right side.

import Button from '@tailus-ui/Button';
import { Text, Link, Caption, Title } from '@tailus-ui/typography';
import Input from '@tailus-ui/Input';
import Label from '@tailus-ui/Label';
import Card from '@tailus-ui/Card';
import { Check } from 'lucide-tailus';
import Avatar from '@tailus-ui/Avatar';
import { Google, Microsoft } from './icons';
import Separator from '@tailus-ui/Separator';

export function Register2() {
    return (
        <main className="grid min-h-screen [grid-template-rows:auto_1fr] lg:absolute lg:inset-0 lg:z-10 lg:grid-cols-2">
            <div className="h-full p-6 lg:p-20">
                <div className="mx-auto max-w-md lg:ml-auto lg:mr-0">
                    
                    // your logo here

                    <div className="my-12 hidden space-y-6 lg:block">
                        <div className="grid gap-3 [grid-template-columns:auto_1fr]">
                            <div className="flex size-6 rounded-full border bg-[--ui-bg]">
                                <Check strokeWidth={3} className="m-auto size-3 text-primary-600 dark:text-primary-400" />
                            </div>

                            <div className="space-y-2">
                                <Title as="span" size="base" weight="medium">
                                    Get Started
                                </Title>
                                <Text size="sm">Natus cupiditate iste assumenda, soluta nostrum? Quod voluptate dolor repellat. Accusantium.</Text>
                            </div>
                        </div>

                        <div className="grid gap-3 [grid-template-columns:auto_1fr]">
                            <div className="flex size-6 rounded-full border bg-[--ui-bg]">
                                <Check strokeWidth={3} className="m-auto size-3 text-primary-600 dark:text-primary-400" />
                            </div>

                            <div className="space-y-2">
                                <Title as="span" size="base" weight="medium">
                                    Start Build
                                </Title>
                                <Text size="sm">Natus cupiditate iste assumenda, soluta nostrum? Quod voluptate dolor repellat. Accusantium.</Text>
                            </div>
                        </div>

                        <div className="grid gap-3 [grid-template-columns:auto_1fr]">
                            <div className="flex size-6 rounded-full border bg-[--ui-bg]">
                                <Check strokeWidth={3} className="m-auto size-3 text-primary-600 dark:text-primary-400" />
                            </div>

                            <div className="space-y-2">
                                <Title as="span" size="base" weight="medium">
                                    Earn
                                </Title>
                                <Text size="sm">Doluta nostrum? Quod voluptate dolor repellat. Accusantium.</Text>
                            </div>
                        </div>
                    </div>

                    <div data-shade="950" className="hidden border lg:block">
                        <div className="mx-auto max-w-xs p-6">
                            <Text align="center" size="sm">
                                Great work on tailfolio template. This is one of the best personal website that I have seen so far :)
                            </Text>
                        </div>

                        <div className="flex items-center justify-center gap-3 border-t border-gray-950/10 py-3 dark:border-white/5">
                            <Avatar.Root>
                                <Avatar.Image src="https://tailus.io/images/reviews/yucel.webp" />
                                <Avatar.Fallback>YF</Avatar.Fallback>
                            </Avatar.Root>

                            <div className="flex flex-col">
                                <Title as="div" className="text-sm" weight="normal">
                                    Yucel Faruksahan
                                </Title>
                                <Caption size="xs">Creator of Tailkits</Caption>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="feedback-bg border-t p-6 lg:card-shadow md:p-20 lg:h-full lg:min-h-screen lg:border-l lg:border-t-0">
                <div className="mx-auto max-w-md space-y-12 lg:ml-0">
                    <div>
                        <div>
                            <Title size="lg" weight="semibold" className="mb-1">
                                Create your Tailus UI account
                            </Title>
                            <Text className="my-0" size="sm">
                                Create an account to continue
                            </Text>
                        </div>

                        <div className="mt-8 grid grid-cols-2 gap-3">
                            <Button.Root variant="outlined" intent="gray" className="w-full">
                                <Button.Icon type="leading" size="sm">
                                    <Google />
                                </Button.Icon>
                                <Button.Label>Google</Button.Label>
                            </Button.Root>

                            <Button.Root variant="outlined" intent="gray" className="w-full">
                                <Button.Icon type="leading" size="sm">
                                    <Microsoft />
                                </Button.Icon>
                                <Button.Label>Microsoft</Button.Label>
                            </Button.Root>
                        </div>

                        <form className="mx-auto mt-8 space-y-6">
                            <div className="space-y-6 rounded-[--btn-radius] shadow-sm shadow-gray-500/5">
                                <div className="relative grid items-center gap-3 [grid-template-columns:1fr_auto_1fr]">
                                    <Separator />

                                    <Caption as="span" className="block" size="sm">
                                        Or continue with
                                    </Caption>

                                    <Separator />
                                </div>

                                <div className="space-y-6">
                                    <div className="grid gap-4 sm:grid-cols-2 sm:gap-3">
                                        <div className="space-y-2.5">
                                            <Label size="sm" htmlFor="firstname">
                                                First name
                                            </Label>
                                            <Input id="firstname" name="firstname" type="text" required variant="mixed" size="md" />
                                        </div>

                                        <div className="space-y-2.5">
                                            <Label size="sm" htmlFor="lastname">
                                                Last name
                                            </Label>
                                            <Input id="lastname" name="lastname" type="text" required variant="mixed" size="md" />
                                        </div>
                                    </div>

                                    <div className="space-y-2.5">
                                        <Label size="sm" htmlFor="email">
                                            Your email
                                        </Label>
                                        <Input id="email" name="email" type="email" required variant="mixed" size="md" />
                                    </div>

                                    <div className="space-y-2.5">
                                        <Label size="sm" htmlFor="password">
                                            Password
                                        </Label>
                                        <Input id="password" name="password" type="password" required variant="mixed" size="md" />
                                    </div>
                                </div>
                            </div>

                            <Button.Root className="w-full">
                                <Button.Label>Create Account</Button.Label>
                            </Button.Root>
                        </form>
                    </div>

                    <Card variant="soft" data-shade="925" className="rounded-[calc(var(--card-radius)-0.25rem)] dark:bg-[--ui-bg]">
                        <Caption className="my-0" size="sm" align="center">
                            Already have an account ? {''}
                            <Link intent="neutral" size="sm" variant="underlined" href="/examples/forms/login1">
                                Login
                            </Link>
                        </Caption>
                    </Card>
                </div>
            </div>
        </main>
    );
}

Sign Up Example 3 / Forms

Page with social buttons and a background image on right.

import Button from '@tailus-ui/Button';
import { Text, Link, Caption, Title } from '@tailus-ui/typography';
import Input from '@tailus-ui/Input';
import Label from '@tailus-ui/Label';
import { Google, Microsoft } from './icons';
import Separator from '@tailus-ui/Separator';

export function Register3() {
    return (
        <>
            <img className="fixed inset-y-0 right-0 hidden h-screen w-1/2 object-cover object-left lg:block" src="https://images.unsplash.com/photo-1707581471193-183252f0d85b?q=80&w=2877&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
            <main className="inset-0 z-10 m-auto h-fit px-8 py-12 lg:absolute lg:grid lg:w-screen lg:max-w-full lg:grid-cols-2 lg:gap-32 lg:px-0">
                <div>
                    <div className="mx-auto max-w-md lg:ml-auto lg:mr-0 lg:pr-12">
                        <div>
                            <div>
                                
                                // Your logo here

                                <Title size="xl" className="mb-1 mt-12">
                                    Welcome to Tailus UI
                                </Title>
                                <Text className="my-0" size="sm">
                                    Create an account to continue
                                </Text>
                            </div>

                            <div className="mt-8 grid grid-cols-2 gap-3">
                                <Button.Root variant="outlined" intent="gray" className="w-full">
                                    <Button.Icon type="leading" size="sm">
                                        <Google />
                                    </Button.Icon>
                                    <Button.Label>Google</Button.Label>
                                </Button.Root>

                                <Button.Root variant="outlined" intent="gray" className="w-full">
                                    <Button.Icon type="leading" size="sm">
                                        <Microsoft />
                                    </Button.Icon>
                                    <Button.Label>Microsoft</Button.Label>
                                </Button.Root>
                            </div>

                            <form className="mx-auto mt-8 space-y-6">
                                <div className="space-y-6 rounded-[--btn-radius] shadow-sm shadow-gray-500/5">
                                    <div className="relative grid items-center gap-3 [grid-template-columns:1fr_auto_1fr]">
                                        <Separator />

                                        <Caption as="span" className="block" size="sm">
                                            Or continue with
                                        </Caption>

                                        <Separator />
                                    </div>

                                    <div className="space-y-6">
                                        <div className="grid gap-4 sm:grid-cols-2 sm:gap-3">
                                            <div className="space-y-2.5">
                                                <Label size="sm" htmlFor="firstname">
                                                    First name
                                                </Label>
                                                <Input id="firstname" name="firstname" type="text" required size="md" />
                                            </div>
                                            <div className="space-y-2.5">
                                                <Label size="sm" htmlFor="lastname">
                                                    Last name
                                                </Label>
                                                <Input id="lastname" name="lastname" type="text" required size="md" />
                                            </div>
                                        </div>

                                        <div className="space-y-2.5">
                                            <Label size="sm" htmlFor="email">
                                                Your email
                                            </Label>
                                            <Input id="email" name="email" type="email" required size="md" />
                                        </div>

                                        <div className="space-y-2.5">
                                            <Label size="sm" htmlFor="password">
                                                Password
                                            </Label>
                                            <Input id="password" name="password" type="password" required size="md" />
                                        </div>
                                    </div>
                                </div>

                                <Button.Root className="w-full">
                                    <Button.Label>Create Account</Button.Label>
                                </Button.Root>
                            </form>
                        </div>

                        <div className="mt-12">
                            <Caption className="my-0" size="sm" align="center">
                                Already have an account ?{''}
                                <Link intent="neutral" size="sm" variant="underlined" href="/examples/forms/login2">
                                    Login
                                </Link>
                            </Caption>
                        </div>
                    </div>
                </div>
            </main>
        </>
    );
}

Sign Up Example 4 / Forms

Sign Up form wrapped in a card.

import Button from '@tailus-ui/Button';
import { Text, Link, Caption, Title } from '@tailus-ui/typography';
import Input from '@tailus-ui/Input';
import Label from '@tailus-ui/Label';
import { Google, Microsoft } from './icons';
import Separator from '@tailus-ui/Separator';
import Card from '@tailus-ui/Card';

export function Register4() {
    return (
        <>
            <img className="fixed inset-0 hidden size-full object-cover dark:block" src="https://images.unsplash.com/photo-1496147539180-13929f8aa03a?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
            <img className="fixed inset-0 size-full object-cover dark:hidden" src="https://images.unsplash.com/photo-1518972734183-c5b490a7c637?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />

            <main className="relative">
                <Card variant="mixed" className="feedback-bg m-6 mx-auto flex h-full min-h-[calc(100vh-3rem)] p-6 sm:w-2/3 lg:w-1/2 lg:p-12">
                    <div data-rounded="medium" className="m-auto h-fit max-w-sm space-y-12">
                        <div>
                            <div>
                                
                                // Your logo here

                                <Title size="lg" weight="semibold" className="mb-1 mt-12">
                                    Create your Tailus UI account
                                </Title>

                                <Text className="my-0" size="sm">
                                    Create an account to continue
                                </Text>
                            </div>

                            <div className="mt-8 grid grid-cols-2 gap-3">
                                <Button.Root variant="soft" intent="gray" className="w-full">
                                    <Button.Icon type="leading" size="sm">
                                        <Google />
                                    </Button.Icon>
                                    <Button.Label>Google</Button.Label>
                                </Button.Root>

                                <Button.Root variant="soft" intent="gray" className="w-full">
                                    <Button.Icon type="leading" size="sm">
                                        <Microsoft />
                                    </Button.Icon>
                                    <Button.Label>Microsoft</Button.Label>
                                </Button.Root>
                            </div>

                            <form className="mx-auto mt-8 space-y-8">
                                <div className="space-y-6 rounded-[--btn-radius] shadow-sm shadow-gray-500/5">
                                    <div className="relative grid items-center gap-3 [grid-template-columns:1fr_auto_1fr]">
                                        <Separator />

                                        <Caption as="span" className="block" size="sm">
                                            Or continue with
                                        </Caption>

                                        <Separator />
                                    </div>
                                    <div className="space-y-4">
                                        <div className="grid gap-4 sm:grid-cols-2 sm:gap-3">
                                            <div className="space-y-2.5">
                                                <Label size="sm" htmlFor="firstname">
                                                    First name
                                                </Label>
                                                <Input id="firstname" name="firstname" type="text" required variant="outlined" />
                                            </div>

                                            <div className="space-y-2.5">
                                                <Label size="sm" htmlFor="lastname">
                                                    Last name
                                                </Label>
                                                <Input id="lastname" name="lastname" type="text" required variant="outlined" />
                                            </div>
                                        </div>

                                        <div className="space-y-2.5">
                                            <Label size="sm" htmlFor="email">
                                                Your email
                                            </Label>
                                            <Input id="email" name="email" type="email" required variant="outlined" />
                                        </div>

                                        <div className="space-y-2.5">
                                            <Label size="sm" htmlFor="password">
                                                Password
                                            </Label>
                                            <Input id="password" name="password" type="password" required variant="outlined" />
                                        </div>
                                    </div>
                                </div>

                                <Button.Root intent="neutral" className="w-full">
                                    <Button.Label>Create Account</Button.Label>
                                </Button.Root>
                            </form>
                        </div>

                        <Card variant="soft" data-shade="925" className="rounded-[calc(var(--card-radius)-0.25rem)] dark:bg-[--ui-bg]">
                            <Caption className="my-0" size="sm" align="center">
                                Already have an account ? {''}
                                <Link intent="neutral" size="sm" variant="underlined" href="">
                                    Login
                                </Link>
                            </Caption>
                        </Card>
                    </div>
                </Card>
            </main>
        </>
    );
}