JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<section id="section">
 <div class="blockOne">
 <div class="wh">Сказочное заморское яство</div>
  <div class="bot">
  <div class="colBase">Чего сидишь?купи.</div>
  <div class="colBase_2">Печень утки разварная.</div>
  <div class="colBase_3">Печалька, закончился.</div>
 </div>
 </div>
 <div class="blockOne">
 <div class="wh">Сказочное заморское яство</div>
  <div class="bot">
  <div class="colBase">Чего сидишь?купи.</div>
  <div class="colBase_2">Голова утки.</div>
  <div class="colBase_3">Печалька, закончился.</div>
 </div>
 </div>
 <div class="blockOne">
 <div class="wh">Сказочное заморское яство</div>
  <div class="bot">
  <div class="colBase">Чего сидишь?купи.</div>
  <div class="colBase_2">Рыба.</div>
  <div class="colBase_3">Печалька, закончился.</div>
 </div>
 </div>
</section>

CSS

.blockOne{
    display: inline-block;
}
.wh{ 
    width: 100px; 
    height: 60px; 
    border: solid 6px #1698D9;
}
.wh:hover{
    border-color: #2EA8E6;
}
.blockOne.clicked .wh{
    border-color: #E62E7A;
}
.blockOne.clicked:hover .wh{
    border-color: #D91667;
}
.blockOne .colBase_2,
.blockOne.clicked .colBase {
    display: none;
}

.blockOne.clicked .colBase_2{
    display: block;
}
.blockOne.clickedNot .wh{
    border-color: #B3B3B3;
    color: #B3B3B3;
    background-color: #F2F2F2;
}
.blockOne .colBase_3,
.blockOne.clickedNot .colBase {
    display: none;
}

.blockOne.clickedNot .colBase_3{
    display: block;
    color: #FFFF66;
}

JavaScript

$('.blockOne').on('click', function() {
  $(this).toggleClass('clicked');
});