JSFiddle - React, Tailwind, and code Playground
HTML
<div class="hideme">1</div>
<div class="hideme">2</div>
<div class="hideme">3</div>
<div class="hideme">4</div>
<div class="hideme">5</div>
<div class="hideme">6</div>
<div class="hideme">7</div>
<div class="hideme">8</div>
<div class="hideme">9</div>
CSS
.hideme{
height: 150px;
width:150px;
background: #000;
margin-bottom: 10px;
visibility:hidden;
color:#fff;
}
JavaScript
$('.hideme').each(function(i) {
if( $(window).scrollTop() + $(window).height() > $(this).position().top + $(this).outerHeight() ){
$(this).css('visibility', 'visible');
}
});
$(window).scroll( function(){
$('.hideme').each( function(i){
if( $(window).scrollTop() + $(window).height() > $(this).position().top + $(this).outerHeight() ){
$(this).css('visibility', 'visible');
}
});
});