JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="box">
    <div class="top">
      hover over me
    </div>
    <div class="bottom">
      door #1
    </div>
  </div>
  <div class="box">
    <div class="top">
      hover over me
    </div>
    <div class="bottom">
      door #2
    </div>
  </div>
  <div class="box">
    <div class="top">
      hover over me
    </div>
    <div class="bottom">
      door #3
    </div>
  </div>
</div>

CSS

.container .box {
  float: left;
  width: 150px;
  margin: 20px;
}

.container .box .top {
  padding: 12px;
  background-color: blue;
  color: white;
}

.container .box .bottom {
  padding: 12px;
  background-color: red;
  color: white;
  display: none;
}

.container .box .top:hover + .bottom {
  display: block;
}