JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs-list">
    <li class="active">Первый пункт</li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ul>

<div class="pane-box">
    <div class="pane active">1</div>
    <div class="pane">2</div>
    <div class="pane">3</div>
</div>

CSS

.tabs-list {
    height: 32px;
    margin-bottom: 20px;
}

.tabs-list li {
    float: left;
    height: 30px;
    cursor: pointer;
    padding-right: 20px;
    border-bottom: 2px solid white;
}

.tabs-list li.active {
    border-bottom: 2px solid red;
}


.pane-box .pane {
    display: none;
}

.pane-box .pane.active {
    display: block;
}

JavaScript

$('.tabs-list li').click(function() {
	var obj = $(this);
	var index = obj.index();
	$('.tabs-list li').removeClass('active').eq(index).addClass('active');
	$('.pane-box .pane').removeClass('active').eq(index).addClass('active');
});