JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <a href="#" id="tab1" class="active">Вкладка 1</a>
    <a href="#" id="tab2">Вкладка 2</a>    
    <div id="con_tab1" class="active">Содержимое 1
        <ul>
            <li class="my_profile"><a href="#">My Profile</a></li>
            <li><a href="#">User Info</a></li>
            <li><a href="#">My Reports</a></li>
        </ul>
    </div>
    <div id="con_tab2">Содержимое 2</div>
</div>

CSS

#wrapper div {
    display:none;
}
#wrapper a.active {
    color: black;
    cursor: default;
    font-weight: bold;
    text-decoration: none;
}
#wrapper div.active {
    display:block;
    width:100%;
}

#tab2{display:none;}

JavaScript

$('#wrapper a').click(function() {
        var click_id=$(this).attr('id');
        if (click_id != $('#wrapper a.active').attr('id') ) {
            $('#wrapper a').removeClass('active');
            $(this).addClass('active');
            $('#wrapper div').removeClass('active');
            $('#con_' + click_id).addClass('active');
        }
            });
 $('.my_profile ').click(function() {
     $('#tab2 , #con_tab2 ').css({'display':'inline-block'}).addClass('active') ;
     $('#tab1 , #con_tab1').css({'':''}).removeClass('active') ;
     $('#con_tab1').css({'display':'none'});
     $('#con_tab2').css({'display':'block'});
   
      });