JSFiddle - React, Tailwind, and code Playground

by shawnhsuicpdas

HTML

<div id="LoginContainer">
  <div class="logincontainer  clearfix">
    <div id="LoginLeftContainer"><img src="http://lorempixel.com/400/60" /></div>
    <div id="LoginMiddleBar"><img src="http://lorempixel.com/1/311" /></div>
    <div id="LoginRightContainer">
      <form id="SignupFormPost" method="POST">
        <input class="UserNameInput" placeholder="UserName" name="UserName" type="text">
        <input class="PassWordInput" placeholder="PassWord" name="PassWord" type="password">
        <select class="LanguageSelect" name="lang">
          <option value="" disabled="" selected="">Select your language</option>
          <option value="en">English</option>
          <option value="tw">Traditional Chinese(繁體中文)</option>
          <option value="cn">Simplified Chinese(简体中文)</option>
        </select>
        <button class="loginbtn loginbtn-agree loginbtn-margin">Login</button>
      </form>
    </div>
  </div>



</div>

CSS

.logincontainer {
  display: block;
  width: 900px;
  position: absolute;
  height: 300px;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -450px;
}

#LoginLeftContainer {
  position: absolute;
  float: left;
  top: 50%;
  width: 50%;
  margin-top: -30px;
}

#LoginMiddleBar {
  position: absolute;
  float: right;
  left: 50%;
  margin-left: -0.5px;
}

#LoginRightContainer {
  position: absolute;
  float: right;
  width: 30%;
  left: 50%;
  top: 50%;
  margin-left: 90px;
  margin-top: -61.5px;
}

.UserNameInput {
  width: 100%;
  /* height:40px; */
  padding: 5px;
  margin-bottom: 10px;
}

.PassWordInput {
  width: 100%;
  /* height:40px; */
  padding: 5px;
  margin-bottom: 10px;
}

.LanguageSelect {
  width: 100%;
  /*height: 43px;*/
  padding: 5px;
  margin-bottom: 10px;
}


/*loginbtn*/

.loginbtn {
  width: 60px;
  height: 25px;
  color: #151515;
  letter-spacing: 1px;
  position: absolute;
  left: 0px;
}

.loginbtn-agree {}

.loginbtn-margin {
  margin-top: 8px;
}