JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<form class="pure-form pure-form-aligned">
    <div class="pure-control-group">
        <label for="txtUsuario" class="clase">User</label>
        <input type="text" name="txtUsuario" />
    </div>
    <div class="pure-control-group">
        <label for="txtPass" class="clase">Password</label>
        <input type="password" name="txtPass" />
    </div>
</form>

CSS

.pure-form-aligned .pure-control-group {
    margin-bottom: 0.5em;
}
.pure-form-aligned .pure-control-group label {
    display: inline-block;
    margin: 0 1em 0 0;
    text-align: right;
    vertical-align: middle;
    width: 15em;
}
input {
    display: inline-block;
    width: 30%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: 0 1px 3px #DDDDDD inset;
    box-sizing: border-box;
    display: inline-block;
    padding: 0.5em 0.6em;
    vertical-align: middle;
    line-height: normal;
    font-size: 100%;
    margin: 0;
}