JSFiddle - React, Tailwind, and code Playground

HTML

<input>
<div class=overlay>
</div>

CSS

.overlay {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:rgba(255, 0, 0, .5);
}

JavaScript

input =  document.querySelector('input');
overlay =  document.querySelector('.overlay');

document.body.addEventListener('click', function () {
    console.log('body clicked');
}, false);

input.addEventListener('focus', function (e) {
    e.stopPropagation();
    console.log('input focused');
}, false);


overlay.addEventListener('click', function (e) {
    overlay.style.display = "none";
    console.log('overlay clicked');
}, false);