JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <form id="loginform">
        <label for="username">Username:</label>
        <span><input name="username" id="username" type="text" autofocus /></span>
        
        <label for="password">Password:</label>
        <span><input name="password" id="password" type="password" /></span>
        
        <input id="loginBtn" type="submit" name="submit" value="Login" />
    </form>
</div>

CSS

#wrapper {
	height: auto;
	background-color: #dfe9f6;
	margin: 8px;
	padding: 8px;
	border: 1px solid #99bce8;
}
span {
    margin-bottom: 8px;
    display: block;
    overflow: hidden;
}
label, input {
    height: 17px;
}
label {
    float: left;
    width: 80px;
}
input {
	border: 1px solid #abadb3;
	width: 100%;
}
input[type="submit"] {
    height: 22px;
}