JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<span></span><span></span>
</div>

CSS

div {width:400px;height:200px;margin:auto;}
span {display:inline-block;vertical-align:top;width:50%;height:100%;background:#ccc;transition:all .4s ease;cursor:pointer;}
span+span {background:#bbb;}
div:hover span:first-child, span:first-child:hover+span {background:#0a4;}
div span:first-child:hover {background:#ccc;}