JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div class="parent">
    Some Box
    <div class="child">
        Some Child Box
    </div>
</div>
<div class="parent" style="left:140px;">
    Some Box
    <div class="child">
        Some Child Box
    </div>
</div>
<div class="parent" style="top:140px;">
    Some Box
    <div class="child">
        Some Child Box
    </div>
</div>
<div class="parent" style="top:140px; left:140px;">
    Some Box
    <div class="child">
        Some Child Box
    </div>
</div>
</div>

CSS

#container {
    position: relative;
}

.parent {
    background: #444;
    color: #fff;
    display: block;
    height: 100px;
    padding: 10px;
    position: absolute;
    width: 100px;

}

.child {
    background: #777;
    display: none;    
    height: 300px;
    position: relative;
    z-index:5;
}

.parent:hover .child {
    display: block;
    z-index:5;
    position:absolute;
}
}