JSFiddle - React, Tailwind, and code Playground

HTML

<div class="filters">
    <div class="filters__tabs">
        <div class="filters__item active">Первый</div>
        <div class="filters__item">Второй</div>
        <div class="filters__item">Третий</div>
    </div>
    
    <div class="filters__list">
        <div class="filters__box active">Контент1</div>
        <div class="filters__box">Контент2</div>
        <div class="filters__box">Контент3</div>
    </div>
</div>

Тест

CSS

.filters__tabs{
    margin-bottom: 20px;
}
.filters__item{
    display: inline-block;
    margin-right: 10px;
}
.filters__box{
    display: none;
}
.filters__box.active{
    display: block;
}

JavaScript

$('.filters').on('click', '.filters__item:not(.active)', function() {			$(this).addClass('active').siblings().removeClass('active').parents('.filters').find('.filters__box').eq($(this).index()).fadeIn(500).siblings().fadeOut(0);
});