<section class="login-page-1">
  <div class="fui-container shadow">
    <div class="row">

      <!-- COL -->
      <div class="col-md-5 left-col bg-primary">
        <div class="info">
          <!-- TITLE -->
          <h1 class="login-title">Welcome to <span class="weight-600">Famous UI</span></h1>

          <hr>

          <!-- UL -->
          <ul class="mt-4">
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
          </ul>
        </div>
      </div>

      <div class="col-md-7 right-col">

        <div class="fui-tabs">
          <!-- TABS -->
          <div class="fui-tab-nav text-muted">
            <span class="fui-tab-link active" data-tab="login-tab">Login</span>
            <span>/</span>
            <span class="fui-tab-link" data-tab="signup-tab">Sign Up</span>
          </div>

          <!-- TAB CONTAINER -->
          <div class="fui-tab-container">

            <!-- LOGIN -->
            <div class="fui-tab-content active" id="login-tab">
              <form action="">

                <!-- INPUT -->
                <div class="group">
                  <input type="email" name="email" class="fui-input" placeholder="Email Address" required>
                  <i class="fa fa-envelope text-muted"></i>
                </div>

                <!-- INPUT -->
                <div class="group">
                  <input type="password" name="password" class="fui-input" placeholder="Password" required>
                  <i class="fa fa-lock text-muted"></i>
                </div>

                <!-- INPUT -->
                <div class="checkbox-group mt-1">
                  <input type="checkbox" name="rememberme" id="rememberme" class="fui-input">
                  <label for="rememberme" class="text-muted">Remember me</label>
                </div>

                <!-- SUBMIT -->
                <div class="group">
                  <button class="fui-btn fui-btn-primary rounded outline uppercase weight-500">Login</button>
                </div>


                <!-- LINKS -->
                <div class="pt-4 bottom-links">

                  <span class="py-1 text-muted">Don't Have an
                    <a href="#signup-tab" data-tab="signup-tab" class="weight-500 fui-tab-link">account?</a>
                  </span>

                  <span class="px-1 text-muted py-1">/</span>

                  <span class="py-1 text-muted">Forgot <a href="" class="weight-500">Password?</a></span>

                </div>

              </form>
            </div>

            <!-- SIGN UP -->
            <div class="fui-tab-content" id="signup-tab">
              <form action="">

                <!-- INPUT -->
                <div class="group">
                  <input type="text" name="name" class="fui-input" placeholder="Your Name" required>
                  <i class="fa fa-user text-muted"></i>
                </div>

                <!-- INPUT -->
                <div class="group">
                  <input type="email" name="email" class="fui-input" placeholder="Email Address" required>
                  <i class="fa fa-envelope text-muted"></i>
                </div>

                <!-- INPUT -->
                <div class="group">
                  <input type="tel" name="phone" class="fui-input" placeholder="Phone Number" required>
                  <i class="fa fa-phone text-muted"></i>
                </div>

                <!-- INPUT -->
                <div class="group">
                  <input type="password" name="password" class="fui-input" placeholder="Password" required>
                  <i class="fa fa-lock text-muted"></i>
                </div>


                <!-- SUBMIT -->
                <div class="group">
                  <button class="fui-btn fui-btn-primary rounded outline uppercase weight-500">Sign Up</button>
                </div>


                <div class="pt-4 bottom-links">
                  <span class="py-1 text-muted">Already Have an
                    <a href="#login-tab" data-tab="login-tab" class="weight-500 fui-tab-link">account?</a>
                  </span>
                </div>

              </form>
            </div>

          </div>

        </div>
      </div>

    </div>
  </div>
</section>

.login-page-1 {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 50px 15px;
  background: #0062b3;
}

.login-page-1 .fui-tab-link,
.login-page-1 .fui-tab-nav,
.login-page-1 .fui-tab {
  border: none !important;
}

.login-page-1 .active {
  color: #005499 !important;
}

.login-page-1 .fui-container {
  background: white;
  max-width: 1100px;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

.login-page-1 .left-col,
.login-page-1 .right-col {
  padding: 50px;
}

.login-page-1 .left-col {
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.login-page-1 hr {
  border-color: #007ee6;
}

.login-page-1 ul {
  padding-left: 0;
}

.login-page-1 ul li {
  padding: 5px;
  font-size: 18px;
}

.login-page-1 .fui-tab-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-left: 5px;
  margin-bottom: 10px;
}

.login-page-1 .fui-tab-nav > span {
  padding: 10px 5px;
}

.login-page-1 .fui-tab-nav .fui-tab-link {
  cursor: pointer;
  font-size: 20px;
}

.login-page-1 .fui-tab-nav .fui-tab-link.active, .login-page-1 .fui-tab-nav .fui-tab-link:hover {
  color: #008cff;
}

.login-page-1 .group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
}

.login-page-1 .group .fui-input {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  padding-right: 40px;
  border: none;
  border-bottom: 2px solid #949494;
  min-height: 50px;
}

.login-page-1 .group .fui-input:focus {
  border-color: #008cff;
}

.login-page-1 .group .fui-input::-webkit-input-placeholder {
  color: #949494;
}

.login-page-1 .group .fui-input:-ms-input-placeholder {
  color: #949494;
}

.login-page-1 .group .fui-input::-ms-input-placeholder {
  color: #949494;
}

.login-page-1 .group .fui-input::placeholder {
  color: #949494;
}

.login-page-1 .group i {
  position: absolute;
  right: 10px;
}

.login-page-1 .group button {
  border-width: 2px !important;
}

.login-page-1 .bottom-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media (max-width: 768px) {
  .login-page-1 .left-col,
  .login-page-1 .right-col {
    padding: 50px 15px;
    text-align: center;
  }
  .login-page-1 .left-col .login-title,
  .login-page-1 .right-col .login-title {
    font-size: 40px;
  }
  .login-page-1 .bottom-links {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
  .login-page-1 .bottom-links .px-1 {
    display: none;
  }
}