JSFiddle - React, Tailwind, and code Playground

HTML

<div class="region-map-wrap">
	<ul class="region-list">
			<li class="item"><span class="num">1</span><span class="city">one</span></li>
			<li><span class="num">2</span><span class="city">two</span></li>
			<li><span class="num">3</span><span class="city">three</span></li>
			<li><span class="num">4</span><span class="city">four</span></li>
			<li><span class="num">5</span><span class="city">five</span></li>
			<li><span class="num">6</span><span class="city">six</span></li>
			<li><span class="num">7</span><span class="city">seven</span></li>
	</ul>

	<div class="region-map">
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 width="97.907px" height="102.533px" viewBox="0 0 97.907 102.533" enable-background="new 0 0 97.907 102.533"
			 xml:space="preserve">
		<g>
			<polygon class="map-shape" fill="#009A8B" stroke="#000000" stroke-miterlimit="10" points="4.559,101.959 0.513,25.768 33.772,0.623 97.33,47.07 
				84.834,90.274 	"/>
			<circle fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" cx="43.626" cy="55.002" r="24.27"/>
			<text transform="matrix(1 0 0 1 35.839 65.252)" fill="#FFFFFF" font-family="'OpenSans'" font-size="28.0337">1</text>
		</g>
		</svg>

		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 width="142.252px" height="122.158px" viewBox="0 0 142.252 122.158" enable-background="new 0 0 142.252 122.158"
			 xml:space="preserve">
		<g>
			<polygon fill="#89CBC4" stroke="#000000" stroke-miterlimit="10" points="108.986,0.5 138.782,28.095 141.739,54.532 
				109.06,121.321 67.812,81.5 1.278,81.5 36.763,48.723 28.712,12.433 106.993,0.5 	"/>
			<circle fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" cx="84.91" cy="47.614" r="24.27"/>
			<text transform="matrix(1 0 0 1 77.1236 57.8642)" fill="#FFFFFF" font-family="'OpenSans'"...

CSS

.region-list {
		list-style: none;
	}
	.region-list li {
		padding: 15px;
		min-width: 140px;
	}
	.region-list li:hover {
		/*background-color: #213A46;*/
		color: #ffffff;
	}
	.region-list span.num {
		border-radius: 50%;
		border: 2px solid #189C8C;
		padding: 5px 10px;
		margin-right: 10px;
		color: #189C8C;
	}
/*

*/
.active {
    background-color: red;
}

JavaScript

$('.region-list .item').hover(function(){
    $(this).addClass('active');
    $('.region-map .map-shape').attr("fill", "#ff0000");
}, function(){
    $(this).removeClass('active');
    $('.region-map .map-shape').attr("fill", "#009A8B");
});