JSFiddle - React, Tailwind, and code Playground

HTML

<div class="region-map-wrap">
	<div class="region-map">
		<div class="title1"><span class="num">1</span><span class="city">one</span></div>
		<svg class="item1" 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>
	</div>
</div>

CSS

.title1 {
    font-size: 18px;
    font-family: verdana;
}

.title1:hover + .item1 .map-shape {
    fill: #213A46;
}