JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box-layout">
			<img src="https://i.ibb.co/7vmYrmb/img-layout.jpg" alt="">
			<svg viewbox="0 0 700 490">
				<path id="sales-1" class="part" d="M 0,455.78947 H 150.4386 V 311.92982 L 0,311.98277 Z"></path>
				<path id="sales-2" d="m 373.09187,32.861668 -0.31014,147.934182 h 114.74979 l -0.62027,-43.41884 H 625.85153 L 625.54139,33.171803 Z"></path>
				<path id="sales-3" class="sales" d="m 401.59198,304.51651 -0.57783,151.39151 H 625.21226 V 353.05425 l -138.10141,1.15566 v -48.53774 z"></path>
				<path id="sales-4" class="part" d="M 0,166.31579 1.3157895,308.42105 H 124.5614 l -0.43859,-140.35087 z"></path>
				<text x="35" y="390" fill="red" font-size="26px">
				    продано
				</text>
         
				<text x="450" y="95" fill="red" font-size="26px">
				    продано
				</text>
				<text x="470" y="410"  fill="red" font-size="26px">
				    продано
				</text>
				<text x="20" y="250"  fill="red" font-size="26px">
				    продано
				</text>
        
			</svg>
	
		</div>

SCSS

.box-layout {
	position: relative;
	font-size: 0;
}
.box-layout img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}
.box-layout svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
path {
	fill: #3F3FFF;
	opacity: 0.2;
	cursor: pointer;
	transition: 0.3s ease all;
	position: relative;
}
path:hover {
	transition: 0.3s ease all;
	opacity: 0.5;
}

path.sales {
	fill: #ffffff;
	opacity: 0.6;

}