JSFiddle - React, Tailwind, and code Playground

HTML

<form class="form" class="row">
      <div class="form-controller">
        <label for="title">What needs to be done?</label>
        <input type="text" class="sm-4" id="title" name="title" minlength="4" required/>
      </div>
      <div class="form-controller">
        <label for="date">Date to be completed?</label>
        <input type="date" id="date" class="sm-4" name="title" required/>
      </div>
      <div class="form-controller">
        <label for="title">Priority</label>
        <select class="sm-4" name="priority" required/>
          <option value="0">Low</option>
          <option value="1">Medium</option>
          <option value="2">High</option>
        </select>
      </div>
      <div class="form-controller">
        <input type="submit" name="title" />
      </div>
    </form>

CSS

input.dirty:required:invalid{
    color: red;
  }
  input.dirty:required:valid{
    border-bottom: 2px solid green;
  }

JavaScript

window.onload = function(){
      var inputs = document.forms[0].elements; // the form
      for(let input of inputs){
        input.addEventListener('invalid', makeDirty);
        input.addEventListener('blur', makeDirty);
        input.addEventListener('valid', makeDirty);
      }
    }