JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<span class="span2" tabindex="0">Show Me</span>
<p class="alert" tabIndex="-1">Some alarming information here</p>
<pre id="out"></pre>

CSS

.alert {
  opacity: 0;
}
.span2:focus ~ .alert {
  opacity: 1;
}

.alert:focus {
  opacity: 1;
}

JavaScript

window.addEventListener('focus', (event) => {
	out.textContent += 'FOCUS ' + document.activeElement.tagName + '\n';
}, true)
window.addEventListener('blur', (event) => {
	out.textContent += 'BLUR ' + event.target.tagName + '\n';
}, true)