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;
  float: left;
  width: 24%;
  background: white;
  margin-bottom: 10px;
  margin-right:5px
  border-radius: 2px;
 }
.item:last-child{margin-right:0;}

.item .box{}
.item .in{
  display:none;
}

.item:hover .in{
  display: block;
}







.clear{clear: both;}