JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
    <div class="block-in">
        1<br />a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />i<br />j<br />k<br />l<br />m<br />n<br />o<br />p<br />
    </div>
</div>

<div class="block">
    <div class="block-in">
        2<br />a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />i<br />j<br />k<br />l<br />m<br />n<br />o<br />p<br />
    </div>
</div>

<div class="block">
    <div class="block-in">
        3<br />a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />i<br />j<br />k<br />l<br />m<br />n<br />o<br />p<br />
    </div>
</div>

<div class="block">
    <div class="block-in">
        4<br />a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />i<br />j<br />k<br />l<br />m<br />n<br />o<br />p<br />
    </div>
</div>

<div class="block">
    <div class="block-in">
        5<br />a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />i<br />j<br />k<br />l<br />m<br />n<br />o<br />p<br />
    </div>
</div>

<div class="block">
    <div class="block-in">
        6<br />a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />i<br />j<br />k<br />l<br />m<br />n<br />o<br />p<br />
    </div>
</div>

CSS

.block {
    float: left;
    width: 200px;
    height: 100px;
    overflow: hidden;
    margin-bottom: 40px;
}

.block:hover {
    overflow: visible;
    position: relative;
}

.block-in {
    background-color: #fff;
}

.block:hover .block-in {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 0 2px #000;
}