JSFiddle - React, Tailwind, and code Playground

by Jools Chadwick

HTML

<body id="body">
<div tabindex="1" id="outerDiv">
Outer div
<span id="inlineSpan">Inline span.</span>
<span id="inlineBlockSpan" class="inline-block-span">Inline-block span.</span>
<span id="blockSpan">Block span.</span>
<span id="initialSpan">Initial span.</span>
</div>
<div id="output">

</div>
</body>

CSS

#inlineSpan{
  display:inline;
}
#inlineBlockSpan{
  display:inline-block;
}
#blockSpan{
  display:block;
}
#initialSpan{
  display:initial;
}

.lastClicked{
  background-color:red;
}

div:focus .lastClicked{
  background-color:green;
}

span,#outerDiv{
  border: 1px black solid;
  padding:1px
}

JavaScript

$("span").on("click",function(){
	$("span").removeClass("lastClicked");
  $(this).addClass("lastClicked");
  setTimeout(function(){
   		$("#output").append(document.activeElement.id+"<br>")
   });
})

$("#outerDiv").on("focus", ".inline-block-span",function(){
	$("#outerDiv").focus();
})