JSFiddle - React, Tailwind, and code Playground

HTML

<div id="id1" class="item"><a href="#">DIV1</a></div> 
<div id="id2" class="item"><a href="#">DIV2</a></div> 
<div id="id3" class="item"><a href="#">DIV3</a></div> 
<div id="rightDiv">
    <a id="id1match" class="region"> </a>
    <a id="id2match" class="region"> </a>
    <a id="id3match" class="region"> </a>
    
    <div id="fakeDiv1" class="fake"><a href="#">DIV1</a></div>
    <div id="fakeDiv2" class="fake"><a href="#">DIV2</a></div>
    <div id="fakeDiv3" class="fake"><a href="#">DIV3</a></div>
</div>

CSS

/* style of left side */
.item {width:100px}
.item a,.fake a{width:100px;height:100px;line-height:100px;text-align:center;display:block;text-decoration:none}
.item a:hover {color:#fff!important}

#id1 a { color:red}
#id1 a:hover,#fakeDiv1 a {background:red}
#id2 a {color:blue}
#id2 a:hover,#fakeDiv2 a {background:blue}
#id3 a { color:green }
#id3 a:hover,#fakeDiv3 a { background:green}

/*right side div and links styling*/

#rightDiv {background:yellow;position:absolute;left:100px;top:0;height:300px;width:300px}
#rightDiv .region { background:grey;position:absolute;left:0;top:0;width:100px;height:100px;cursor:pointer }

/*right side region links positioning*/

#rightDiv a#id1match { left:60px;top:10px }
#rightDiv a#id2match { left:180px;top:30px }
#rightDiv a#id3match { left:140px;top:180px }

/*left link hover right side change*/

#id1:hover ~ #rightDiv a#id1match { background:red }
#id2:hover ~ #rightDiv a#id2match { background:blue }
#id3:hover ~ #rightDiv a#id3match { background:green }


/*right link hover left side change*/
.fake {position:absolute;left:-9999px;top:0}
.fake a {color:#fff}
#id1match:hover {background:red}
#id1match:hover ~ #fakeDiv1 {left:-100px;top:0}
#id2match:hover {background:blue}
#id2match:hover ~ #fakeDiv2 {left:-100px;top:100px} 
#id3match:hover {background:green}
#id3match:hover ~ #fakeDiv3 {left:-100px;top:200px}