JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<div class="loginModal show" onclick="this.classList.remove('show')">
  <div class="loginModal-main" onclick="event.stopPropagation();">
    <img class="logo" src="http://via.placeholder.com/64x64"/>
    <div class="title">會員登入<br><span class="subTitle">Sign In</span></div>
    <div class="block fbLogin">臉書登入<span class="subTitle">Sign in with Facebook</span></div>
    <div class="hr"></div>
<form id="UserLogin" name="userForm" autocomplete="off">
    <input class="email" type="text" placeholder="請輸入電子郵件 E-mail"/>
    <input class="password" type="password" placeholder="請輸入密碼 Password"/>
  </form>
    <div class="block login" onclick="if(this.classList.contains('disable')!==true) console.log('test')">確認登入<span class="subTitle">Sign in</span></div>
    <a class="block firstTime">首次購物<span class="subTitle">First time shopping</span></a>
  </div>
</div>

CSS

.loginModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  text-align: center;
}
.loginModal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.loginModal.show {
  display: block;
}

.loginModal-main {
  display: inline-block;
  vertical-align: middle;
  width: 530px;
  height: 638px;
  border-radius: 8px;
  background-color: #ffffff;
  text-align: center;
}

.loginModal-main > .logo {
  position: relative;
  top: 50px;
}

.loginModal-main > .title {
  position: relative;
  top: 70px;
  font-family: NotoSansCJKtc;
  font-size: 35px;
  font-weight: 100;
  letter-spacing: 2.1px;
  text-align: center;
  color: #353235;
}
.loginModal-main .subTitle {
  font-family: Lato;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 1.2px;
  text-align: center;
  color: #353235;
}

.loginModal-main .block {
  position: relative;
  height: 45px;
  border-radius: 5px;
  margin: 0 100px;
  cursor: pointer;
  font-family: PingFangTC;
  font-size: 15px;
  letter-spacing: 1.5px;
  display: block;
  text-align: center;
}

.loginModal-main .block:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}
.loginModal-main .block .subTitle {
  font-family: Lato;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-align: center;
}
.loginModal-main .fbLogin {
  top: 95px;
  background-color: #3c5a96;
  color: #ffffff;
}
.loginModal-main .fbLogin .subTitle {
  color: #ffffff;
}
.loginModal-main .hr {
  position: relative;
  margin: 0 100px;
  top: 130px;
  height: 1px;
  background: #A2A0A2;
}
.loginModal-main .hr:after {
  content: 'OR';
  width: 25px;
  height: 18px;
  padding: 0 12px;
  font-family: Lato;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 1.5px;
  text-align: center;
  color: #353235;
  position: relative;
  top: -9px;
  line-height: 18px;
  background: white;
 ...

JavaScript

$('#UserLogin .email, #UserLogin .password').on('keyup change', function() {
	checkSignAvaiable();
});

function checkSignAvaiable() {
	if($('#UserLogin .email').val().length !==0 && $('#UserLogin .password').val().length !==0) {
  	$('.loginModal-main .login').removeClass('disable');
  }
  else {
  	$('.loginModal-main .login').addClass('disable');
  }
};
checkSignAvaiable();