JSFiddle - React, Tailwind, and code Playground

HTML

<div class="camp">
        <div class="test"></div>
    </div>

CSS

* {box-sizing: border-box}
    
        .camp {
            width: 200px;
            height: 200px;
            border: solid 1px silver;
            overflow: hidden;
            margin: 200px;
        }
        
        .test {
            width: 200px;
            height: 100px;
            border: solid 1px red;
            position: absolute;
            margin-top:-50px;
            display: none;
        }
        
        .camp:hover .test {
            display: block;
        }