JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="block1">
   
    </div>
    <div id="block2">
       
    </div>
</div>

CSS

#block1,
#block2 {
    display:inline-block;
    background:#444;
    width:49%;
    height: 400px;
    transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

#block2 {
    background:#999;
}

#parent:hover #block1{
    -webkit-transform: translateX(-100%);
}

#parent:hover #block2 {
    -webkit-transform: translateX(100%);
}
}