JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <div class="block_content">
    основной контент
  </div>
  <div class="block__hidden">
    скрытый контент
  </div>
</div>
<div class="block">
  <div class="block_content">
    основной контент
  </div>
  <div class="block__hidden">
    скрытый контент
  </div>
</div>
<div class="block">
  <div class="block_content">
    основной контент
  </div>
  <div class="block__hidden">
    скрытый контент
  </div>
</div>
<div class="block">
  <div class="block_content">
    основной контент
  </div>
  <div class="block__hidden">
    скрытый контент
  </div>
</div>

CSS

.block
{
  width: 200px;
  height: 300px;
  border: 1px solid #000;
  background: #fff;
  position:relative;
  box-sizing: border-box;
display:inline-block;
}

.block__hidden
{
  display:none;
  z-index:10;
  position: absolute;
  width: 100%;
  height: 200px;
  bottom: -200px;
  border: 1px solid #000;
  border-top: 0;
  background: #fff;
  box-sizing: border-box;
}
.block:hover .block__hidden
{
 display: block;
}