JSFiddle - React, Tailwind, and code Playground

HTML

<div id="input" contenteditable="true" onfocus="findCurrentSpan(this)">
    <div>
    <span id="first">first span</span>
    </div>
    <div>
    <span id="second">second span</span>
    </div>
    <div>
    <span id="third">third span</span>
    </div>
</div>
<p id="info" style="color:green">

</p>

JavaScript

function findCurrentSpan(editor) {
    var element = document.getElementById("input");
    var currentSpan = document.activeElement;
    document.getElementById("info").innerHTML = "Active element's id is " + currentSpan.id;
}