JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">

<div class="p">
  <h1></h1>
</div>

</div>

CSS

.box{
  width:300px;
  border:1px black solid;
  padding-top: 100px;
}
h1{  border:1px black solid;
  height:100px;
  margin-top: -100px;
}
.p{  border:1px black solid;
  height:100px;
}
.p:hover h1{
  background: black;
}