JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-container">
<div class="content1">content 1</div>
<div class="content2">content 2</div>
<div class="content3">content 3</div>
</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

CSS

.main-container{

       height:1000px;

}
.content1 {
    height:300px;
    width:500px;
    border:2px solid red;
    display:none;
}
.content2 {
    height:300px;
    width:500px;
    border:2px solid blue;
    display:none;
}
.content3 {
    height:300px;
    width:500px;
    border:2px solid orange;
      display:none;
}

JavaScript

$(document).ready(function(){
    $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();

     if(scrollTop > 200){
      $('.content1').fadeIn('slow');
     }
        
     if(scrollTop > 400){
         $('.content2').fadeIn('slow');
     }
     
     if(scrollTop > 600){
         $('.content3').fadeIn('slow');
     }

    })
})