JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div>
<p>
<label for="usuario" class="form">Usuario</label>
<input type="text" id="usuario">
<label class="error">Campo obligatorio</label>
</p>
<p>
<label for="fecha" class="form">Fecha</label>
<input type="text" id="fecha">
<label class="error">Formato dd/mm/aaaa</label>
</p>
<p>
<label for="comment" class="form">Comentario</label>
<textarea id="comment" rows="8"></textarea>
<label class="error">Max. XXX caracteres</label>
</p>
<p>
<label class="form">Sexo</label>
<input type="radio" id="radio_hombre" name="sexo"/>
<label for="radio_hombre" class="option">Hombre</label>
<input type="radio" id="radio_mujer" name="sexo"/>
<label for="radio_mujer" class="option">Mujer</label>
<label class="error">Campo obligatorio</label>
</p>
</div>
</body>
</html>
CSS
body{
margin: 8px;
font-size: 14px;
font-family: Lucida Sans Unicode, Lucida Grande, Arial, Helveticam, Verdana;
color: #444;
}
p{
padding-top: 20px;
}
input[type=text], textarea{
padding: 4px 2px;
border: 1px solid #aaa;
background: #fff;
width: 30%;
resize: none;
}
label.form{
font-size: 14px;
text-align: right;
width: 15%;
float: left;
margin: .3em 2% 0 0;
}
label.option{
margin-right: 20px;
}
.error{
font-size: 13px;
padding: 4px 18px;
color: #D8000C;
background-color: #FDD5CE;
border: 1px solid #D8000C;
margin: 40px;
}