JSFiddle - React, Tailwind, and code Playground
HTML
<form class="form-signin">
<div class="account-wall">
<input type="email" name="email" readonly="readonly" />
<input type="password" name="password" />
<div>
<input type="checkbox" name="rememberme" />
<label for="rememberme">Remember me</label>
</div>
<button type="submit" name="submit">Sign In</button>
</div>
</form>
CSS
input[readonly]
{
opacity: 0.5;
background: #0000004d;
}
.form-signin
{
max-width: 330px;
padding: 15px;
margin: 0 auto;
padding-top: 5px;
text-align:center; /*add this;*/
}
.account-wall
{
margin-top: 20px;
padding: 40px 0px 20px 0px;
background-color: #f7f7f7;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
/*add below*/
.account-wall input[type=email], .account-wall input[type=password]{margin:5px 5px;width:280px;}
.account-wall div{display:inline-block;}
.account-wall button{display:inline-block;}