javascript - 尝试在现有 JavaScript 中实现 HTML 和 CSS：界面完全不同

Question

我为客户创建了一个登录屏幕，我试图在他们的系统中实现它，但 CSS 的行为似乎与以前不同。

我尝试了各种 div 分组、css 标签，但我似乎无法让它发挥同样的作用。

这是已经存在的 JavaScript：

render() {
    const loginFailNotice = this.state.loginFail ? (
      <p className="loginFailNotice">Login Failed, Please Try Again</p>
    ) : null;
    return (
      <div className="loginArea">
        <div className="loginBox2">
          <input className="loginboxtype"
            placeholder="E-mail"
            onChange={this.handleEmailChange}
            onKeyPress={this.handleEnterPress}
          />
          {loginFailNotice}

        </div>
        <LoginButton onClick={this.handleLogin}>Login</LoginButton>
      </div>
    );
  }
}

我的 HTML：

    <div class="limiter">
        <div class="container-login100">
            <div class="wrap-login100 p-t-85 p-b-20">
                <form autocomplete="off" class="login100-form validate-form">
                    <span class="login100-form-avatar">
                        <img src="images/avatar-01.png" alt="AVATAR">
                    </span>

                    <div class="wrap-input100 validate-input m-t-85 m-b-35" data-validate = "Enter email">
                        <input class="input100" type="text" name="email">
                        <span class="focus-input100" data-placeholder="Email"></span>
                    </div>

                    <!--This is the button only-->
                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn">
                            Login
                        </button>
                    </div>


                </form>
            </div>
        </div>
    </div>

我的 CSS：

.container-login100-form-btn {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 200px;
}

.login100-form-btn {
  font-family: Poppins-Medium;
  font-size: 16px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 450px;
  height: 50px;
  background-color: #46b3d1;
  border-radius: 25px;
  box-shadow: 0 10px 30px 0px rgba(69, 172, 219, 0.5);
  -moz-box-shadow: 0 10px 30px 0px rgba(69, 172, 219, 0.5);
  -webkit-box-shadow: 0 10px 30px 0px rgba(69, 172, 219, 0.5);
  -o-box-shadow: 0 10px 30px 0px rgba(69, 172, 219, 0.5);
  -ms-box-shadow: 0 10px 30px 0px rgba(69, 172, 219, 0.5);
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.login100-form-btn:hover  {
  background-color: #333333;
  box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
  -moz-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
  -webkit-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
  -o-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
  -ms-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
}

我在两种情况下都使用了相同的 CSS 以及更改标签、div 等以获得不同的结果，但都未能复制原始设计

我希望它看起来像这样（http://prntscr.com/nsfjkd）

但它看起来像这样（http://prntscr.com/nsfjt1）

标签： javascripthtmlcss