JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item item1"></div>
<div class="filler"></div>

CSS

.item {
    width: 100px;
}
.item {
    background-color: gray;
    position: relative;
}

.filler {
    background-color: lightgray;
}
.item, .filler, .item:before, .item:after {
    height: 100px;
    float: left;
/*/////////////////////////*/
 -webkit-transition: all 1s;
    transition: all 1s;
}





.item:before, .item:after {
    content: '';
    position: relative;
    opacity: 0;
}

.item:before {
    right: 50px;
}

.item:after {
    left: 50px;
}

.item:hover:before, .item:hover:after {
    opacity: 1;
}

.item1:hover {
    background-color: sandybrown;
}

.item1:after {
    background: linear-gradient(90deg, sandybrown, white);
}