JSFiddle - React, Tailwind, and code Playground
HTML
<label>
<input type = "text" required/><span></span>
</label>
CSS
@font-face {
font-family: 'Font Awesome';
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/fonts/fontawesome-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
label {
display: inline-block;
position: relative;
}
label > input {
height: 25px;
font: normal 14px/25px Sans-Serif;
padding: 0 25px 0 10px;
border-radius: 5px;
border: 1px solid #aaa;
outline: 0;
}
label > input:required + span:before {
content:"\f069";
font: normal 14px/1 "Font Awesome";
color: red;
position: absolute;
bottom: 50%;
right: 5px;
transform: translateY(50%);
}