JSFiddle - React, Tailwind, and code Playground

HTML

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="hello">Hello</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

CSS

#hello{
    width:100px;
    height:80px;
    border:solid 1px #ddd;
    line-height:80px;
    text-align:center;
    background-color:#CAA;
}

JavaScript

$(function() {
    $(window).scroll(function() {
        var scrollFromTop = $(window).scrollTop();
        $('#hello').html(scrollFromTop);
        $("#hello").css("opacity", 1.5-(scrollFromTop/250));
    });
});