```
const { Row, Column } = Section;
const { ButtonsWrapper } = Form;
<div>
  <p>Login form</p>
  <Background backgroundColor="x-light-grey" style={{ padding: '1rem 0' }}>
    <Section size="xs">
      <Form
        title="Login"
        onSubmit={(e) => {
          console.log({ value1: state.value1, value2: state.value2 });
          e.stopPropagation();
        }}
        backgroundColor="white"
        error="My error"
        boxShadow
        titleCentered
        padding
        footerContent={<ButtonsWrapper align="center">
          <Button size="md" type="submit">Login</Button>
          <Button size="md" variant="cancel" type="submit">Cancel</Button>
        </ButtonsWrapper>}
      >
        <TextInput
          label="Email"
          type="text"
          mandatory
          value={state.value1}
          onChange={e => setState({value1: e.target.value})}
        />
        <TextInput
          label="Password"
          type="text"
          mandatory
          value={state.value2}
          onChange={e => setState({value2: e.target.value})}
        />

      </Form>
    </Section>
  </Background>
  <p>Sign up form</p>
  <Background backgroundColor="x-light-grey" style={{ padding: '1rem 0' }}>
    <Section size="sm">
      <Form
        title="Sign up"
        onSubmit={(e) => {
          console.log({ value1: state.value1, value2: state.value2 });
          e.stopPropagation();
        }}
        backgroundColor="white"
        boxShadow
        titleCentered
        padding
      >
        <Row marginBottom>
          <Column sm="6">
            <TextInput
              label="First Name"
              type="text"
              value={state.first_name}
              onChange={e => setState({ first_name: e.target.value })}
              mandatory
              withoutMarge
            />
          </Column>
          <Column sm="6">
            <TextInput
              label="Last Name"
              type="text"
              value={state.last_name}
              onChange={e => setState({ last_name: e.target.value })}
              mandatory
              withoutMarge
            />
          </Column>
        </Row>
        <Row marginBottom>
          <Column sm="6">
            <TextInput
              label="Email"
              type="text"
              value={state.email}
              onChange={e => setState({ email: e.target.value })}
              mandatory
              withoutMarge
            />
          </Column>
          <Column sm="6">
            <TextInput
              label="Password"
              type="password"
              value={state.password}
              onChange={e => setState({ password: e.target.value })}
              mandatory
              withoutMarge
            />
          </Column>
        </Row>
        <ButtonsWrapper>
          <Button size="md" type="submit">Sign up</Button>
          <Button size="md" variant="cancel" type="submit">Cancel</Button>
        </ButtonsWrapper>
      </Form>
    </Section>
  </Background>
</div>
```