JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="border"></div>
    <div class="block">
        Hover me
    </div>
    
</div>
<div class="container">
    <div class="border"></div>
    <div class="block">
        Hover me
    </div>
    
</div>
<div class="container">
    <div class="border"></div>
    <div class="block">
        Hover me
    </div>
    
</div>

CSS

.container {
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 2;
}

.block {
    content: "";
    background: #cecece;
    position: absolute;
    top: 0;
    bottom:0;
    right: 0;
    left: 0; 
    z-index: 1;
}

.border{
    content: "";
    background: red;
    position:absolute;
    top: 0;
    bottom:0;
    right: 0;
    left: 0; 
    z-index: 1;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
}

.container:hover {
    z-index: 10;
}

.container:hover .border {
    left: -10px;
    right: -10px;
    bottom: -10px;
    top: -10px;
}