<div class="container login p-5 w-50 mb-3">
  <div class="row">
    <form name="loginForm" class="col-sm-6 offset-sm-3" novalidate auto-complete="off">
      <div class="text-center mb-5"><i class="fa fa-sign-in-alt fa-3x"></i></div>
      <div class="form-row">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="username-addon">👤</span>
          </div>
          <input type="text" class="form-control" placeholder="Username" aria-label="username" aria-describedby="username-addon">
        </div>
      </div>
      <!--     <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="emailId-addon">✉</span>
      </div>
      <input type="email" class="form-control" placeholder="Email" aria-label="email" aria-describedby="emailId-addon">
    </div> -->
      <div class="form-row">
        <div class="input-group mb-5">
          <div class="input-group-prepend">
            <span class="input-group-text" id="password-addon">🔑</span>
          </div>
          <input type="password" class="form-control" placeholder="Password" aria-label="password" aria-describedby="password-addon">
        </div>
      </div>
      <input type="button" class="btn btn-outline-light btn-block" value="Login" />
    </form>
  </div>
</div>

<div class="container signup p-5 w-50 mb-5">
  <form name="signupForm" novalidate auto-complete="off">
    <div class="text-center mb-5"><i class="fas fa-user-plus fa-3x"></i></div>
    <div class="form-group">
      <label for="name" class="sr-only">Full Name</label>
      <input type="text" class="form-control" placeholder="Fullname" id="name" required />
      <div class="invalid-feedback">Full name is mandatory!!!</div>
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="username-addon">👤</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="username" aria-describedby="username-addon">
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="emailId-addon">✉</span>
      </div>
      <input type="email" class="form-control" placeholder="Email" aria-label="email" aria-describedby="emailId-addon">
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="password-addon">🔑</span>
      </div>
      <input type="password" class="form-control" placeholder="Password" aria-label="password" aria-describedby="password-addon">
    </div>
    <div class="input-group mb-5">
      <div class="input-group-prepend">
        <span class="input-group-text" id="mobile-addon">📞</span>
      </div>
      <input type="tel" class="form-control" placeholder="Mobile No." aria-label="mobile" aria-describedby="mobile-addon">
    </div>
    <input type="button" class="btn btn-outline-light btn-block" value="Register" />
  </form>
</div>

<!-- Login Form - Without Input field icons -->
<!-- <div class="container login p-5 w-50 mb-3">
  <form name="loginForm" novalidate auto-complete="off">
    <div class="text-center mb-5"><i class="fa fa-sign-in-alt fa-3x"></i></div>
    <div class="form-group">
      <label for="usernameId">Username</label>
      <input type="text" class="form-control" id="usernameId" name="username" required />
      <div class="invalid-feedback">Username is mandatory!!!</div>
    </div>
    <div class="form-group">
      <label for="emailId">Email ID</label>
      <input type="email" class="form-control" id="emailId" name="email" required />
      <div class="invalid-feedback">Email ID is mandatory!!!</div>
    </div>

    <div class="form-group">
      <label for="passwordId">Password</label>
      <input type="password" class="form-control" id="passwordId" name="password" required />
      <div class="invalid-feedback">Password is mandatory!!!</div>
    </div>

    <input type="button" class="btn btn-success btn-block" value="Login" />
  </form>
</div> -->

<!-- Signup Form - without input icons -->
<!-- <div class="container signup p-5 w-50 mb-5">
  <form name="signupForm" novalidate auto-complete="off">
    <div class="text-center mb-5"><i class="fas fa-user-plus fa-3x"></i></div>
    <div class="form-group">
      <label for="name">Full Name</label>
      <input type="text" class="form-control" id="name" required />
      <div class="invalid-feedback">Full name is mandatory!!!</div>
    </div>
    <div class="form-group">
      <label for="usernameId">Username</label>
      <input type="text" class="form-control" id="usernameId" name="username" required />
      <div class="invalid-feedback">Username is mandatory!!!</div>
    </div>
    <div class="form-group">
      <label for="emailId">Email ID</label>
      <input type="email" class="form-control" id="emailId" name="email" required />
      <div class="invalid-feedback">Email ID is mandatory!!!</div>
    </div>

    <div class="form-group">
      <label for="passwordId">Password</label>
      <input type="password" class="form-control" id="passwordId" name="password" required />
      <div class="invalid-feedback">Password is mandatory!!!</div>
    </div>
    <div class="form-group">
      <label for="telNumber">Telephone<span class="text-white">(*<small>Optional</small>)</span></label>
      <input type="tel" class="form-control" />
    </div>
    <input type="button" class="btn btn-primary btn-block" value="Register" />
  </form>
</div> -->
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --login-bg-color: #308aed;
  --login-text-color: #fff;
  --signup-bg-color: #3eb300;
  --signup-text-color: #fff;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 150vh;
}

.login {
  background-color: var(--login-bg-color);
  border-radius: 5px;
  color: var(--login-text-color);
  padding: 20px;
}

.signup {
  background-color: var(--signup-bg-color);
  border-radius: 5px;
  color: var(--signup-text-color);
  padding: 20px;
}
View Compiled
const loginForm = document.querySelector("form[name='loginForm']");
const signupForm = document.querySelector("form[name='signupForm']");
const username = document.querySelector("#usernameId");
const email = document.querySelector("#emailId");
const password = document.querySelector("#passwordId");

window.addEventListener(
  "load",
  function (e) {
    if (loginForm) {
      loginForm.addEventListener(
        "submit",
        function (event) {
          console.log(loginForm);
          if (!loginForm.checkValidity()) {
            event.preventDefault();
            event.stopPropagation();
            loginForm.classList.add("was-validated");
          }
        },
        false
      );
    }

    if (signupForm) {
      signupForm.addEventListener(
        "submit",
        function (event) {
          console.log(signupForm);
          if (!signupForm.checkValidity()) {
            event.preventDefault();
            event.stopPropagation();
            signupForm.classList.add("was-validated");
          }
        },
        false
      );
    }
  },
  false
);

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.0/umd/popper.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js