JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
    height:50px;
    width:50px;
    position:relative;
    background:pink;
    top:0;
    left:0;
    transition:all 100ms ease-in;    
}
div:hover{
    top:-4px;
    left:-4px;
}
div:hover:before, div:hover:after{
    opacity:1;
}
div:before, div:after {
    content:'';
    display:inline-block;
    position:absolute;
    opacity:0;
    transition:opacity 100ms ease-in;
}
div:after {
    height:100%;
    right:-4px;
    border-top:4px solid white;
    border-left:4px solid red;
}
div:before {
    width:100%;
    height:4px;
    top:100%;
    border-left:4px solid white;
    border-top:4px solid red;
}