JSFiddle - React, Tailwind, and code Playground

HTML

<span class="my-form-control-group has-error">
  <input type="text" class="my-form-control" >
      <span>Some Error Here</span>
</span>

CSS

.my-form-control-group {
  padding: 4px;
  
}

.my-form-control {
  border-width: 1px;

}

.my-form-control-group.has-error {
    color:white;
    border-color:red;
    background-color: red;
    padding: 1px 1px 4px 1px;
}