JSFiddle - React, Tailwind, and code Playground

by Peter Hozák

HTML

<div id="simulate_border"><div id="box">roll over me</div></div>

CSS

#box{
    position : relative;
    top: 10px;
    left: 10px;
    width : 100px;
    height : 100px;
    background-color : gray;
}
#simulate_border {
    position : relative;
    width : 120px;
    height : 120px;
    background: linear-gradient(to right bottom, red 50%, black 50%);
    background-size: 200% 200%;
    background-position:right bottom;
    transition:all 500ms ease;
}
#simulate_border:hover{
    background-position:left top; 
}