JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <div id="container">
      <div id="login">
        Login
      </div>
      <div id="form">
        <div id="container1">
          <span class="fieldname">Username</span>
          <span class="textbox"><input class="textfield" type="text" /></span>
        </div>
        <div id="container2">
          <span class="fieldname">Password</span>
          <span class="textbox"><input class="textfield" type="text" /></span>
        </div>
      </div>
    </div>

CSS

* {
  box-sizing: border box;
}

body {
  background-image: url(../images/nature_beach-1280x800.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  margin: 0;
}

html {
  height: 100%;
}

#container {
  background-color: rgba(255, 255, 255, .50);
  height: 65%;
  width: 30%;
  box-sizing: border-box;
  transform: translate(200%, 20%);
  font-family: Myriad Pro;
  font-size: 20px;
}

#login {
  text-align: center;
  padding: 5%;
  font-weight: bold;
}

#form {
  margin-top: 5%;
  margin-left: 10%;
}

.textfield {
  height: 25px;
  width: 250px;
  background-color: rgba(109, 207, 246, .50);
  border: none;
}

.fieldname {
  float: left;
}

.textbox {
  float: right;
  margin-right: 10%
}

#container1{
    overflow: auto
}
#container2{
     margin-top: 2%;
     overflow: auto
}