JSFiddle - React, Tailwind, and code Playground

HTML

<body>

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

</body>

CSS

@charset "utf-8";
/* CSS Document */

*{
    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%;
    box-sizing: border-box;
    font-family: Myriad Pro;
    font-size:20px;
    margin:auto;
    width:400px;
}

#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;
}


#container2{
  margin-top : 20px;
}