JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="container">
<div class="inner">
<input type="radio" name="gr" id="gr-1" />
<label for="gr-1">1</label>
<input type="radio" name="gr" id="gr-2" />
<label for="gr-2">2</label>
<input type="radio" name="gr" id="gr-3" />
<label for="gr-3">3</label>
<input type="radio" name="gr" id="gr-4" />
<label for="gr-4">4</label>
<input type="radio" name="gr" id="gr-5" />
<label for="gr-5">5</label>

<div class="b-description" id="b-discription-1">1</div>
<div class="b-description" id="b-discription-2">2</div>
<div class="b-description" id="b-discription-3">3</div>
<div class="b-description" id="b-discription-4">4</div>
<div class="b-description" id="b-discription-5">5</div>
</div>
<div class="inner">
<input type="radio" name="gr" id="gr-6" />
<label for="gr-6">6</label>
<input type="radio" name="gr" id="gr-7" />
<label for="gr-7">7</label>
<input type="radio" name="gr" id="gr-9" />
<label for="gr-9">number big</label>
<input type="radio" name="gr" id="gr-8" />
<label for="gr-8">8</label>

<div class="b-description" id="b-discription-6">6</div>
<div class="b-description" id="b-discription-7">7</div>
<div class="b-description" id="b-discription-8">8</div>
<div class="b-description" id="b-discription-9">number big</div>
</div>

</div>

CSS

*{
  box-sizing: border-box;
}
body{
  background: #fff;
}
.container{
  max-width: 450px;
  margin: 25px auto;    
  text-align: center;    
}
.inner{
  position: relative; 
  font-size: 0;
}
[id^=gr-]{
  display: none;
}
[id^=gr-] + label{
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  margin: 5px;
  background: #F4F4F4;
  padding: 35px;
  position: relative;
}
[id^=gr-]:checked + label{
  background: #D8D5D5;  
  margin-bottom: 95px;
}

[id^=gr-]:checked + label:before{
  content: '';
  position: absolute; top: 100%; left: 50%;
  margin-left: -13px; 
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 13px 14px 13px;
  border-color: transparent transparent #FFF3C0 transparent;
}
[id^=b-discription-]{
  position: absolute; top: calc(100% - 81px); left: 0;
  width: 100%;
  overflow: hidden;
  height: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#gr-1:checked + label ~ #b-discription-1,
#gr-2:checked + label ~ #b-discription-2,
#gr-3:checked + label ~ #b-discription-3,
#gr-4:checked + label ~ #b-discription-4,
#gr-5:checked + label ~ #b-discription-5,
#gr-6:checked + label ~ #b-discription-6,
#gr-7:checked + label ~ #b-discription-7,
#gr-8:checked + label ~ #b-discription-8,
#gr-9:checked + label ~ #b-discription-9{
  height: 80px;
  background: #FFF3C0;
}