JSFiddle - React, Tailwind, and code Playground
HTML
<div class="tabs-wrap">
<div class="actions">
<a href="#tab1" class="actions__item active">текст1</a>
<a href="#tab2" class="actions__item">текст2</a>
<a href="#tab3" class="actions__item">текст3</a>
<a href="#tab4" class="actions__item">текст4</a>
</div>
<div class="tabs">
<div id="tab1" class="tabs__item">
Внедрение инновационных разработок ведущих мировых компаний в российские нефтегазовые предприятия. Снижение долгосрочных издержек и увеличение прибыли посредством увеличения срока службы и улучшения характеристик оборудования. Внедрение более безопасного с точки зрения экологии оборудования.
</div>
<div id="tab2" class="tabs__item">ООО «Снабнефтекомплект» поставляет инновационную продукцию для ведущих нефтегазовых компаний России. Мы поставляем на рынок РФ импортную продукцию, не имеющую российских аналогов в качестве стратегического партнера нескольких мировых промышленных холдингов.</div>
<div id="tab3" class="tabs__item">ООО «Снабнефтекомплект» — это компания, которая с 2001г. имеет положительный опыт по поставке МТР для нужд ведущих компаний нефтяной отрасли.</div>
<div id="tab4" class="tabs__item">
Сотрудники нашей компании имеют инженерно-техническое образование по нефтегазовому профилю и большой опыт работы в этой сфере, а так же в сферах логистики и экономики.
</div>
</div>
</div>
CSS
.actions{
overflow: hidden;
}
.actions__item{
float: left;
margin-right: 10px;
padding: 10px;
}
.actions__item.active{
background:#9c0;
}
.tabs{
position: relative;
height: 300px;
overflow: hidden;
}
.tabs__item{
display: none;
position: absolute;
left: 0;
top:0;
}
JavaScript
$(document).ready(function() {
$('.tabs__item:first-child').show();
$('.actions__item').click(function(event) {
event.preventDefault();
$(this).toggleClass('active').siblings().removeClass('active');
var id = $(this).attr('href');
$(id).fadeIn().siblings().fadeOut();
});
});