JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group">
    <input class="form-control valid" id="user_email" name="user[email]" placeholder="Email-Address" size="30" type="email" value="a@aa5305.com"/><span></span>
</div>

CSS

input.valid {
    color: green;
    width: 200px;
}
input.error {
    color: red;
    width: 200px;
}

.form-group {
    position: relative;
    width: 200px;
}
.form-group > .valid + span,
.form-group > .error + span{
        font-weight:bold;
        font-size: 18px;
        display: block;
        position: absolute;
        right: 0;
        top: 2px; 
}

.form-group > .valid + span:after {
        content:"\2713";
        color: green;
}

.form-group > .error + span:after {
        content:"\2715";
        color: red;
}