JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ids"></div>

CSS

.red{
    background: red;
}

body{
        transition: all 1s;
}

#ids{
    width: 200px;
    height: 200px;
    margin: 2000px 0;
    background: tomato;
}

JavaScript

document.onscroll = function(){
  var what = document.querySelector("#ids").getBoundingClientRect().top;
  document.body.classList.toggle("red", what <= window.innerHeight);
}