JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <div>Tab 1</div>
    <div>Tab 2</div>
    <div>Tab 3</div>
</div>
<div id="wrapper">
    <div class="aberta">Texto A</div>
    <div>Texto B</div>
    <div>Texto C</div>
</div>

CSS

#menu {
    width: 100%;
    float: left;
}
#menu div {
    float: left;
    padding: 10px;
    margin: 13px;
    background-color: #aac;
}
#wrapper {
    width: 240px;
    height: 140px;
    border: 3px #cfc solid;
    overflow: hidden;
    position: relative;
}
#wrapper div {
    margin: 20px;
    width: 200px;
    height: 100px;
    background-color: #ccf;
    border: 1px black solid;
    overflow: none;
    position: absolute;
    display: none;
}
#wrapper div.aberta {
    display: block;
}

JavaScript

var wrapper = $('#wrapper');
$('#menu div').on('click', function () {
    var index = $(this).index();
    var largura = wrapper.width();
    var aberta = $('#wrapper div.aberta');
    var clicada = $('#wrapper div').eq(index);
    
    if (clicada.hasClass('aberta')) return false;
    
    aberta.animate({
        'left': -largura
    }, 200, function () {
        $(this).removeClass('aberta').hide();
    });

    clicada.css('left', '300px').show().animate({
        'left': '0px'
    }, 200).addClass('aberta');

});