JSFiddle - React, Tailwind, and code Playground

HTML

<div id="products">
  <br>
  <ul id="prodTitles" onmousedown="return false" onselectstart="return false">
    <li class="prodTitles selectedProd" id="1prod">
      1
    </li>
    <li class="prodTitles" id="2prod">
      1
    </li>
    <li class="prodTitles" id="3prod">
      1
    </li>
    <li class="prodTitles" id="4prod">
      1
    </li>
    <li class="prodTitles" id="5prod">
      1
    </li>
  </ul>
  <div id="prodText">
    <div id="1Prod" class="prodText">
      1
    </div>
    <div id="2Prod" class="prodText">
      2
    </div>
    <div id="3Prod" class="prodText">
      3
      <br>
      <br>
      <br>
      <br>vcvcvxv
    </div>
    <div id="4Prod" class="prodText">
      4
    </div>
    <div id="5Prod" class="prodText">
      5
    </div>
  </div>
</div>
<div id="history">
  <h1 id="historytitle">History</h1>
  <div id="historytext">Разнообразный и богатый опыт новая модель организационной деятельности требуют от нас анализа направлений прогрессивного развития. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности позволяет выполнять важные
    задания по разработке систем массового участия. Таким образом консультация с широким активом способствует подготовки и реализации новых предложений.

  </div>

CSS

#products {
  font-family: thin;
  background-color: #2b2a29;
  height: 100%;
  position: relative;
  display: block;
}

.prodTitles {
  color: #d51d6b;
  cursor: pointer;
  padding: 0.5%;
}

#prodTitles {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  margin: 0;
  padding: 0;
}

.prodTitles:hover {
  background-color: #f5fffa;
}

#prodText {
  color: #2b2a29;
  background-color: #f5fffa;
  position: absolute;
  border-bottom: 3px solid #2b2a29;
  width: 100%;
  z-index: 98;
}

#historytitle {
  font-family: thin;
  color: #d51d6b;
}

JavaScript

function prodText() {
  $(".prodText").toggle();
  if ($('#1prod').hasClass('selectedProd')) {
    $(".prodText").hide();
    $("#1Prod").slideToggle(1000);
  };
  if ($('#2prod').hasClass('selectedProd')) {
    $(".prodText").hide();
    $("#2Prod").show(10);
  };
  if ($('#3prod').hasClass('selectedProd')) {
    $(".prodText").hide();
    $("#3Prod").slideToggle(1000);
  };
  if ($('#4prod').hasClass('selectedProd')) {
    $(".prodText").hide();
    $("#4Prod").show(10);
  };
  if ($('#5prod').hasClass('selectedProd')) {
    $(".prodText").hide();
    $("#5Prod").show(10);
  };

}
prodText();
$(".prodTitles").on('click', function() {
  $(".selectedProd").removeClass("selectedProd");
  $(this).addClass('selectedProd');
  prodText();
});