JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
          <form role="form" name="addClientForm" ng-init="client={}" novalidate>
        <div class="form-group" ng-class="{ 'has-error' : addClientForm.title.$invalid && !addClientForm.title.$pristine }">
            <label>Title</label>
            <input type="text" name="title" class="form-control" placeholder="Enter a title" ng-model="client.title" required />
        </div>
        <div class="form-group" ng-class="{ 'has-error' : addClientForm.company.$invalid && !addClientForm.company.$pristine }">
            <label>Company</label>
            <input type="text" name="company" class="form-control" placeholder="Enter a company" ng-model="client.company" required>
        </div>
            
        <div class="checkbox" ng-class="{ 'has-error' : (addClientForm.vendor.$dirty || addClientForm.consumer.$dirty) && !(client.consumer || client.vendor) }">
          <label class="i-checks">
              <input type="checkbox" name="consumer" ng-model="client.consumer"/><i></i> Consumer
          </label>
        </div>
        <div class="checkbox" ng-class="{ 'has-error' : (addClientForm.vendor.$dirty || addClientForm.consumer.$dirty) && !(client.consumer || client.vendor) }">
          <label class="i-checks">
              <input type="checkbox" name="vendor" ng-model="client.vendor"/><i></i> Vendor
          </label>
        </div>
    </form>

</div>

CSS

.has-error {
    border: 1px solid red;
}