JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 300px; overflow: hidden;">
  <div>
    <label for="formfield1">Form Field 1</label>
    <input type="text" id="formfield1"/>
  </div>
  
  
  <div>
    <label for="formfield2">Form Field 2</label> 
    <input type="text" id="formfield2" />
  </div>

  <div id="errorMessage" class="hidden"></div>
  
</div>

CSS

.hidden { display: none; }
div { margin: 10px; }
label { width: 100px; display: inline-block; }

*:focus { border: 3px solid red; }

JavaScript

$(function () {
	$('#formfield1').on('blur', function(e) {
   	$('#errorMessage').text('Form field is required').show();
  });
  
  $('input').on('focus blur', function (e) {
  	console.log(e.type + ' ' + this.id);
  });
});