JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="form-group ">
  <label class="control-label" for="inputWarning1">Input with warning</label>
    <div class="my-wrapper">
      <input type="text" class="form-control form-control-warning" id="inputWarning1" />
      <span class="my-validation-icon"></span>
    </div>
</div>

CSS

.has-warning .form-control-warning {
    background-image: none;
}
.my-wrapper {
    position: relative;
}
.my-validation-icon::after {
    font-family: FontAwesome;
    position: absolute;
    top: 7px;
    right: 5px;
}
.has-warning .my-validation-icon::after {
    content: "\f087";
    color: #f0ad4e;
}