JSFiddle - React, Tailwind, and code Playground

HTML

<div class="class">
    
</div>

CSS

.class {
      opacity:0;
      transition:all 0.5s;
    margin-top:2000px;
    width:50px;
    height:50px;
    background-color:red;
   }

    .class.in-view {
       opacity:1;
    }

JavaScript

function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

    $(window).scroll(function(){

        if (isScrolledIntoView('.class') === true) {
            $('.class').addClass('in-view')
        }

    });