JSFiddle - React, Tailwind, and code Playground

HTML

<span id="element2" class="margin">element2</span>
<span id="alpha2" class="margin">alpha2</span>
<span id="beta2" class="margin">beta2</span>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


<span class="scrollTop" id="element">element</span>
<br>
<span class="scrollTop" id="alpha">alpha</span>
<br>
<span class="scrollTop" id="beta">beta</span>

CSS

.margin{
    display: inherit;
    margin-bottom:200px
}

JavaScript

$(function(){
    showTab = function(){};
    $('.scrollTop').click(function(e) {	
        e.preventDefault();	
        
        var id = $(this).attr('id'); //Id of clicked item
        var scrollToId = '#'+id+"2"; //Id of scrolled to item
        var target = $(scrollToId).closest('.tab-pane').attr('id');
        
        showTab(target);
        setTimeout(function() {
            $('html, body, nav').animate({
                scrollTop: $(scrollToId).offset().top -100
            }, 500);
        });
    });
});