JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabslide">
    <div class="tabs"><span class="tab" data-id="1">tab1</span><!--
        --><span class="tab" data-id="2">tab2</span><!--
        --><span class="tab" data-id="3">tab3</span></div>
    <div class="pointer">
        <div id="pointer"></div>
    </div>
    <div class="slider">
        <div id="slider"><span>slider1</span><!--
            --><span>slider2</span><!--
            --><span>slider3</span></div>
    </div>
</div>

CSS

.tabslide{
    width:600px;
}
.tab{
    display:inline-block;
    width:200px;
    cursor:pointer;
}
.pointer{
    position:relative;
    height:5px;
    background:#bbb;
}
#pointer{
    position:relative;
    left:0px;
    width:200px;
    height:100%;
    background:#00e;

}

.slider{
    width:100%;
    overflow:hidden;
    position:relative;
}
#slider{
    position:relative;
    left:0px;   
    white-space:nowrap;
}
#slider>span{
    display:inline-block;
    width:100%;
}

JavaScript

$('.tab').click(function(){
    var id = $(this).attr('data-id') - 1;
    var count = $('.tabs').children('.tab').length;
    var tab_width = $(this).width();
    var slider_width = $('#slider').width();
    
    $('#pointer').stop().animate({'left':(id*tab_width)+'px'});
    $('#slider').stop().animate({'left':-(id*slider_width)+'px'});
});