JSFiddle - React, Tailwind, and code Playground

HTML

<!-- HTML ----------------------------- -->
<body>
    <div id="root" tabindex="0">root
        <div id="p1" tabindex="0">p1
            <div id="p2" tabindex="0">p2
            </div>
        </div>
    </div>

</body>

JavaScript

/* Javascript */
var root = document.getElementById("root");
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");

p2.addEventListener('blur', function(event) {
    p1.focus();
    activeEl();
}, false);

p2.focus();
activeEl();
function activeEl() {
    console.log("focused element = ");
    console.log(document.activeElement);
}