JSFiddle - React, Tailwind, and code Playground

HTML

<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>
          <div class="fade">test</div><br>
      <div class="fade"><br><br><br><br><br><br><br><br><br><br><br><br>test</div><br><br><br><br><br><br><br><br><br><br><br>

CSS

.fade{
  opacity: 0;
     -webkit-transition:  1s ;
    -moz-transition:  1s ;
    -o-transition:  1s ;
    -ms-transition:  1s ;
    transition:  1s ;
}
.fade-in{
  opacity: 1;
   -webkit-transition:  1s ;
    -moz-transition:  1s ;
    -o-transition:  1s ;
    -ms-transition:  1s ;

JavaScript

$(window).scroll(function() 
    	{    if ($( "div.fade" ).offset().top - $(window).scrollTop() <= 100){
    $('.fade').addClass( "fade-in");
    }
    else {
        $('.fade').removeClass("fade-in");
    };

    });