JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="wrap">
        <div class="block"><div class="inner">1</div></div>
        <div class="block"><div class="inner">2</div></div>
        <div class="block"><div class="inner">3</div></div>
        <div class="block"><div class="inner">4</div></div>
    
    
</div>

CSS

.wrap{
width:820px;
margin:0 auto;
overflow:hidden;
padding:20px;
}

.block{
float:left;
height:200px;
width:200px;
position:relative;
}

.inner{
position:relative;
display:table-cell;
vertical-align:middle;
text-align:center;
background:#ccc;
width:200px;
height:200px;
}

.block:hover{
z-index:2;
}

.block:hover .inner{
top:-5px;
left:0px;
width:210px;
height:210px;
font-size:20px;
box-shadow:-5px 5px 15px 3px #222;
}