JSFiddle - React, Tailwind, and code Playground

HTML

<div id="out"></div>
<div id="out2"></div>
<div id="corner"></div>
<div id="center"></div>
<div id="result">

</div>

CSS

div {
  position: fixed;
  background: black;
  width: 100px;
  height: 100px;
  
}
#out {
  top: -101px;
}

#out2 {
  right: -101px;
}

#corner {
  top: -50px;
  left: -50px;
}

#center {
  top: 50%;
  left: 50%;
}

#result {
  top: 100px;
  left: 0px;
  background: white;
}

JavaScript

function isElementOutViewport (el) {
    var rect = el.getBoundingClientRect();
    return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight;
}

result.innerHTML = 'out:' + isElementOutViewport(out) + '<br/>'
+ 'out2:' + isElementOutViewport(out2) + '<br/>'
+ 'center:' + isElementOutViewport(center) + '<br/>'
+ 'corner:' + isElementOutViewport(corner) + '<br/>';