JSFiddle - React, Tailwind, and code Playground

HTML

<div class='item'>
  <div class="box">
    Всегда показывает
  </div>
  <div class="in">
    Раскрытие показывает инфо...
  </div>
</div>

<div class='item'>
  <div class="box">
    Всегда показывает
  </div>
  <div class="in">
    Раскрытие показывает инфо...
  </div>
</div>

<div class='item'>
  <div class="box">
    Всегда показывает
  </div>
  <div class="in">
    Раскрытие показывает инфо...
  </div>
</div>

<div class='item'>
  <div class="box">
    Всегда показывает
  </div>
  <div class="in">
    Раскрытие показывает инфо...
  </div>
</div>

<div class='item'>
  <div class="box">
    Всегда показывает
  </div>
  <div class="in">
    Раскрытие показывает инфо...
  </div>
</div>

<div class='item'>
  <div class="box">
    Всегда показывает
  </div>
  <div class="in">
    Раскрытие показывает инфо...
  </div>
</div>

<div class='item'>
  <div class="box">
    Всегда показывает
  </div>
  <div class="in">
    Раскрытие показывает инфо...
  </div>
</div>

<div class='item'>
  <div class="box">
    Всегда показывает
  </div>
  <div class="in">
    Раскрытие показывает инфо...
  </div>
</div>

<div class='item'>
  <div class="box">
    Всегда показывает
  </div>
  <div class="in">
    Раскрытие показывает инфо...
  </div>
</div>

<div class='item'>
  <div class="box">
    Всегда показывает
  </div>
  <div class="in">
    Раскрытие показывает инфо...
  </div>
</div>

<div class='item'>
  <div class="box">
    Всегда показывает
  </div>
  <div class="in">
    Раскрытие показывает инфо...
  </div>
</div>

<div class='item'>
  <div class="box">
    Всегда показывает
  </div>
  <div class="in">
    Раскрытие показывает инфо...
  </div>
</div>
<div class="clear"></div>

CSS

.item{
 position: relative;
 display:inline-block;
  float: left;
  width: 24%;
  background: white;
  margin-bottom: 10px;
  margin-right:5px;
  border-top-style:solid;
  border-right-style:solid;
  border-left-style:solid;
  border-bottom-style:solid;
  border-width:1px;
 }

.item .box, .item .in  {
   width:100%;
}

.item .in {
  position: absolute;
  display:none;
  left:0px;
  right:0px;
}
.item:hover .box {
  border-bottom-style:none;  
}
.item:hover .in {
  display: block;
  left:-1px;
  z-index:2;
  border-right-style:solid;
  border-bottom-style:solid;
  border-left-style:solid;
  border-width:1px;
  background: #fff;
}
.item:last-child{margin-right:0;}
.clear{clear: both;}