JSFiddle - React, Tailwind, and code Playground

HTML

<label for="exampleFormControlInput1">Title of Task</label>
 <input type="text" class="form-control" id="title" placeholder="Title"> 
 <span class="errorMsg">Title of task required </span>

 <button type="required" id="AddTask">Add Task</button>

CSS

.errorMsg {
  display: none;
}

JavaScript

$(document).ready(function() {
$('#AddTask').on('click', function() {
    if ($('#title').val().length <= 0) {
      $(this).prev('.errorMsg').show();
    } else {
      $(this).prev('.errorMsg').hide();
    }
});
});