JSFiddle - React, Tailwind, and code Playground

HTML

<ul>            
<li id="RMS" style="height:260px; background-color:000; background-repeat: no-repeat;display:inline-block;"><a class="RMSLink" href="http://example.com/" title="Test Site 1"></a></li>
<li id="RPM" style="height:260px; background-repeat: no-repeat; display:inline-block;"><a class="RPMLink" href="http://example.com/" title="Test Site 2"></a></li>
</ul>

CSS

/**** UL ******/
ul{
	list-style-type: none;
    position:relative;
    /*float:center;*/
    width:100%;
    height:100%;
    margin:0 0 0;
	display: inline-block;
}
ul li{
    width: 33.3333%;
    float:left;
}
ul li img{
    display: block;
    height: auto;
    width: 100%;
}

@media screen and (min-width: 540px) and (max-width: 800px) {
   ul li{
    width: 25%;
    float:left;
   }
}


@media screen and (min-width: 800px) and (max-width: 1180px) {
   ul li{
    width: 20%;
    float:left;
   }
}
/**** END UL  ****/
li:hover + li#RPM {
background-color:red;
}
li:hover + li#RMS {
 background-color: #CCC;

}
#RMS {width:618px; height:660px; background-color: #000; display:inline-block;}
#RMS:hover {background-color: #CCC;}
a.RMSLink {display: block; height: 100%; width: 100%;text-decoration: none;}
a.RPMLink {display: block; height: 100%; width: 100%;text-decoration: none;}
#RPM {width:618px; height:660px; background-color: #CCC;}
#RPM:hover {background-color: #000;}