JSFiddle - React, Tailwind, and code Playground

by damir aushenov

HTML

<div id="wrapper">
    <a href="#" id="tab1" class="active">Вкладка 1</a>
    <a href="#" id="tab2">Вкладка 2</a>
    <a href="#" id="tab3">Вкладка 3</a>
    <div id="con_tab1" class="active">Содержимое 1</div>
    <div id="con_tab2">Содержимое 2</div>
    <div id="con_tab3">Содержимое 3</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%;
}

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');
        }
    });