import {
Flex,
Box,
FormControl,
FormLabel,
Input,
Checkbox,
Stack,
Link,
Button,
Heading,
} from '@chakra-ui/react';
export default function SimpleCard() {
return (
<Flex minH={'100vh'} align={'center'} justify={'center'} bg={'gray.100'}>
<Stack spacing={8} mx={'auto'} w={'full'} maxW={'md'} py={12} px={6}>
<Heading fontSize={'3xl'} textAlign={'center'}>
Sign in to your account
</Heading>
<Box
rounded={'lg'}
bg={'white'}
boxShadow={'lg'}
p={{ base: 4, md: 8 }}>
<Stack spacing={4}>
<FormControl id="email">
<FormLabel>Email address</FormLabel>
<Input type="email" />
</FormControl>
<FormControl id="password">
<FormLabel>Password</FormLabel>
<Input type="password" />
</FormControl>
<Stack spacing={6}>
<Stack
direction={{ base: 'column', sm: 'row' }}
align={'start'}
justify={'space-between'}>
<Checkbox>Remember me</Checkbox>
<Link color={'blue.500'}>Forgot password?</Link>
</Stack>
<Button colorScheme={'blue'} variant={'solid'}>
Sign in
</Button>
</Stack>
</Stack>
</Box>
</Stack>
</Flex>
);
}
import {
Button,
Checkbox,
Flex,
FormControl,
FormLabel,
Heading,
Input,
Link,
Stack,
Image,
} from '@chakra-ui/react';
export default function SplitScreen() {
return (
<Stack minH={'100vh'} direction={{ base: 'column', md: 'row' }}>
<Flex p={8} flex={1} align={'center'} justify={'center'}>
<Stack spacing={4} w={'full'} maxW={'md'}>
<Heading fontSize={'2xl'}>Sign in to your account</Heading>
<FormControl id="email">
<FormLabel>Email address</FormLabel>
<Input type="email" />
</FormControl>
<FormControl id="password">
<FormLabel>Password</FormLabel>
<Input type="password" />
</FormControl>
<Stack spacing={6}>
<Stack
direction={{ base: 'column', sm: 'row' }}
align={'start'}
justify={'space-between'}>
<Checkbox>Remember me</Checkbox>
<Link color={'blue.500'}>Forgot password?</Link>
</Stack>
<Button colorScheme={'blue'} variant={'solid'}>
Sign in
</Button>
</Stack>
</Stack>
</Flex>
<Flex flex={1}>
<Image
alt={'Login Image'}
objectFit={'cover'}
src={
'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80'
}
/>
</Flex>
</Stack>
);
}
Made on the Internet by Achim Rolle and Lazar Nikolov