JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" style="width:100%; height:500px; background-color:#999; overflow-y:scroll; overflow-x-hidden;">

    <div id="e1" class="entry">Entry</div>
    <div id="e2" class="entry">Entry</div>
    <div id="e3" class="entry">Entry</div>
    <div id="e4" class="entry">Entry</div>
    <div id="e5" class="entry">Entry</div>
    <div id="e6" class="entry">Entry</div>
    <div id="e7" class="entry">Entry</div>
    <div id="e8" class="entry">Entry</div>
    <div id="e9" class="entry">Entry</div>
    <div id="e10" class="entry">Entry</div>
    <div id="e11" class="entry">Entry</div>
    <div id="e12" class="entry">Entry</div>
    <div id="e13" class="entry">Entry</div>
    <div id="e14" class="entry">Entry</div>
    <div id="e15" class="entry">Entry</div>
    <div id="e16" class="entry">Entry</div>
    <div id="e17" class="entry">Entry</div>
    <div id="e18" class="entry">Entry</div>
    <div id="e19" class="entry">Entry</div>
    <div id="e20" class="entry">Entry</div>    
    <div id="e21" class="entry">Entry</div>
    <div id="e22" class="entry">Entry</div>
    <div id="e23" class="entry">Entry</div>
    <div id="e24" class="entry">Entry</div>
    <div id="e25" class="entry">Entry</div>
    <div id="e26" class="entry">Entry</div>
    <div id="e27" class="entry">Entry</div>
    <div id="e28" class="entry">Entry</div>
    <div id="e29" class="entry">Entry</div>
    <div id="e30" class="entry">Entry</div>
    <div id="e31" class="entry">Entry</div>
    <div id="e32" class="entry">Entry</div>
    <div id="e33" class="entry">Entry</div>
    <div id="e34" class="entry">Entry</div>
    <div id="e35" class="entry">Entry</div>    
</div>

CSS

.entry{ padding:10px; border:1px solid #0000aa; width:100$; background-color:#cccccc; }
.entry:hover{ background-color:#999999; }
#box { background-color:#00aa00; width:100%; height:500px; }

JavaScript

$(document).ready(function() {
    $('.entry').click(function() {
        $('#box').remove();
        $(this).after('<div id="box">content</div>');
           
        // works
        var offTop = $('#box').offset().top;
        offTop  = offTop-43;
        $('#main').animate({scrollTop: '+=' + offTop + 'px'}, 400);
 
        // does not work
        //var offTop = $('#box').offset().top;
        //$('#main').scrollTop(offTop);        
        
    });
});