JSFiddle - React, Tailwind, and code Playground

HTML

<form>

  <label for="test-input">Test input</label>
  <input id='test-input' value="" type="text" />
</form>
<p tabIndex="0">This paragraph can be focused with a click.</p>

<div id="result">
  <div>
    <span>Number of focus: </span>
    <span id="num-of-focus"></span>
  </div>
  <div>
    <span>First focused: </span>
    <span id="current-focus"></span>
  </div>
  <div>
    <span>document.activeElement: </span>
    <span id="active"></span>
  </div>

</div>

JavaScript

window.setInterval(function(){
        $('#num-of-focus').text($(':focus').size());
        $('#current-focus').text($(':focus').prop('tagName'));
        $('#active').text((document.activeElement||{}).tagName);

      }, 500);