JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
        <div class="camp">
            <div class="cutted">Контент попросту обрезается ибо нефиг</div>
            <div class="test"></div>
        </div>
    </div>

CSS

* {box-sizing: border-box}

        .box {
            position: relative;
            display: inline-block;
            margin: 200px;
        }

        .camp {
            width: 200px;
            height: 200px;
            border: solid 1px silver;
            overflow: hidden;
            background: #dfdfdf;
        }
        
        .test {
            width: 100%;
            height: 100px;
            border: solid 1px red;
            position: absolute;
            left: 0;
            top: -50px;
            background: #ebebeb;
            display: none;
        }

        .cutted {
            border: 1px solid green;
            width: 100%;
            height: 50px;
            background: #ffccee;
            margin-left: 100px;
            margin-top: 100px;
        }
        
        .camp:hover .test {
            display: block;
        }