JSFiddle - React, Tailwind, and code Playground

HTML

<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%
}