JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-a mot"><div class="s36 light">БЛОК 1 <span class="re-h">/ ОПИСАНИЕ</span></div>
      <span class="h-a1 active punkt pt1">Описание</span>
      <span class="h-a2 punkt pt1">Тарифы</span>
      <span class="h-a3 punkt pt1">Подать заявку</span>
    </div>
    <div class="in rel">
    <div class="h-b-1 abs"><div>Информация</div> <div>о БЛОК 1</div></div>
    <div class="h-b-2 opacity abs">Тарифы БЛОКА 1</div>
    <div class="h-b-3 opacity abs">Форма подачи заявки на БЛОК 1</div>
    </div>
    		<div class="nav-a mot"><div class="s36 light">БЛОК 2 <span class="re-h2">/ ЦЕНЫ</span></div>
      <span class="h-a4 active punkt pt2">Цены</span>
      <span class="h-a5 punkt pt2">Зарегистрировать</span>
    </div>
    <div class="in rel">
    <div class="h-b-4 abs">Цены на блок 2</div>
    <div class="h-b-5 opacity abs">Регистрация блока 2</div>
    </div>

CSS

.abs {
   position: absolute;
 }
 .punkt {
  margin-right: 55px;
    font-size: 16px;
    color: #0060ff;
    border-bottom: 1px dashed #498eff;
    cursor: pointer;
}

.punkt:hover {
  border-bottom: 1px solid #0060ff;
}

.re-h, .re-h2 {
  color: #aaa;
}

.nav-a {
  height: 100px;
}

.nav-a .light {
    margin-bottom: 15px;
}

.active {
  border-bottom: none !important;
  color: #aaaaaa !important;
  cursor: default;
}
 .none {
display:none;
}

.in {
  font-size: 24px;
  margin-bottom: 140px;
}

.opacity {
  opacity: 0;
}

* {
    transition: all 0.5s ease-in-out;
}

JavaScript

$(function() {
$(".nav-a").on("click",".punkt",function(event) {
var el = $(this), text = "/ "+el.text(),
indx = el.addClass('active').siblings(".punkt").removeClass('active').add(el).index(el),
next = el.parent().next();
$(">div", next).addClass("opacity").eq(indx).removeClass("opacity");
$(".light span",el.parent()).text(text);
})
});