JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1">
  <p>data 1</p>
</div>

<div class="box2">
  <p>data 2</p>
</div>

CSS

.box1, .box2{
  width:100px;
  height 100px;
  border:1px solid black;
  text-align:center;
}

.box1{
  display: block;
}

.box2{
  display: none;
}

.box1:hover ~ .box2{
  display:block;
}