JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
<head>
    <title></title>
</head>
<body>
    <div>
        <form action="/Login" method="post">
            <label for="txtUsername">Username</label>
            <input type="text" id="txtUsername" name="username"/>

            <label for="txtPassword">Password</label>
            <input type="password" id="txtPassword" name="password"/>
        </form>        
    </div>
</body>
</html>

CSS

/*Reset browser's default stylesheet to a common baseline
------------------------------------------------------------------------------------------------------------*/
html{color:#555;background:#000;font-family:Arial; font-size:16px;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}
del,ins{text-decoration:none}
li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup,sub{vertical-align:baseline}
legend{color:#000}
input{outline:none}


form
{
    background:#222;
    border-radius: 5px;
    height: 140px;
    width: 320px;
    margin:40px auto 0 auto;
    border:solid 1px #333;
    box-shadow: 0 0 8px #555;
    padding:20px;
}

label{ font-weight:bold; font-size:14px; font-family:Verdana; color:#777;}
input
{
    background: rgba(0,0,0,.1);
    border: 1px solid #000;
    outline: 1px solid #333;
    box-shadow: 0 0 4px #000000 inset;
    color: #444;
    display: block;
    font-size: 16px;
    margin: 5px 0 10px 0;
    padding: 5px;
    width: 300px;
    line-height:16px;
}
input:focus
{
    background: rgba(0,0,0,.3);
}