React Admin Forms - v.10

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
      rel="stylesheet"
    />
​
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
​
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>MDBReact5 Template App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
​
      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
​
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
​

xxxxxxxxxx
 
.cascading-right {
  margin-right: -50px;
}
@media (max-width: 991.98px) {
  .cascading-right {
    margin-right: 0;
  }
}
​

xxxxxxxxxx
 
import React from 'react';
import {
  MDBContainer,
  MDBRow,
  MDBCard,
  MDBCardHeader,
  MDBCol,
  MDBCardBody,
  MDBTabs,
  MDBTabsItem,
  MDBTabsLink,
  MDBTabsPane,
  MDBTabsContent,
  MDBIcon,
  MDBCheckbox,
  MDBInput,
  MDBBtn,
  MDBTextArea,
} from 'mdb-react-ui-kit';
​
function App() {
  return (
    <MDBContainer fluid className='mt-5'>
      <section className='text-center text-lg-start'>
        <div className='container py-4'>
          <MDBRow className='g-0 align-items-center'>
            <MDBCol lg='6' className='mb-5 mb-lg-0'>
              <div
                className='card cascading-right'
                style={{ background: 'hsla(0, 0%, 100%, 0.55)', backdropFilter: 'blur(30px)' }}
              >
                <div className='card-body p-5 shadow-5 text-center'>
                  <h2 className='fw-bold mb-5'>Sign up now</h2>
                  <form>
                    <MDBRow className='mb-4'>
                      <MDBCol>
                        <MDBInput className='mb-4' id='first2' label='First name' />
                      </MDBCol>
                      <MDBCol>
                        <MDBInput className='mb-4' id='last2' label='Last name' />
                      </MDBCol>
                    </MDBRow>
​
                    <MDBInput className='mb-4' type='email' id='email2' label='Email address' />
                    <MDBInput className='mb-4' type='password' id='password2' label='Password' />
​
                    <MDBRow className='mb-4 justify-content-center'>
                      <MDBCol md='6' className='d-flex justify-content-center'>
                        <MDBCheckbox className=' mb-3 mb-md-0' defaultChecked label=' Subscribe to our newsletter' />
                      </MDBCol>
                    </MDBRow>
​
                    <MDBBtn type='submit' block className='mb-4'>
                      Sign up
                    </MDBBtn>
​
                    <div className='text-center'>
                      <p>or sign up with:</p>
                      <MDBBtn color='link' type='button' floating className='mx-1'>
                        <MDBIcon fab icon='facebook-f' />
                      </MDBBtn>
​
                      <MDBBtn color='link' type='button' floating className='mx-1'>
                        <MDBIcon fab icon='google' />
                      </MDBBtn>
​
                      <MDBBtn color='link' type='button' floating className='mx-1'>
                        <MDBIcon fab icon='twitter' />
                      </MDBBtn>
​
                      <MDBBtn color='link' type='button' floating className='mx-1'>
                        <MDBIcon fab icon='github' />
                      </MDBBtn>
                    </div>
                  </form>
                </div>
              </div>
            </MDBCol>
​
            <MDBCol lg='6' className='mb-5 mb-lg-0'>
              <img
                src='https://mdbootstrap.com/img/new/ecommerce/vertical/004.jpg'
                className='w-100 rounded-4 shadow-4'
                alt=''
              />
            </MDBCol>
          </MDBRow>
        </div>
      </section>
    </MDBContainer>
  );
}
​
export default App;
​

Console errors: 0