JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hero-image">
  test
</div>

CSS

div {
  height: 500px;
  background: red;
}

body {
  height: 1000px;
}

JavaScript

$(document).ready(function(){
    $(window).scroll(function(){
        $("#hero-image").css("opacity", 1 - $(window).scrollTop() / $('#hero-image').height());
    });
});