JSFiddle - React, Tailwind, and code Playground

HTML

<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="1139.833px" height="663.313px" viewBox="0 0 1139.833 663.313" style="enable-background:new 0 0 1139.833 663.313;" xml:space="preserve">

  <polygon class="st0" points="0,0.313 638,0.313 383,347.313 0,347.313 ">
    <title>One</title>
  </polygon>

  <polygon class="st1" points="0,353.813 649,353.813 891.5,663.313 0,663.313 ">
    <title>Two</title>
  </polygon>

  <polygon class="st0" points="392.5,347.313 514.75,179.813 645.25,347.313 ">
    <title>Three</title>
  </polygon>

  <polyline class="st0" points="518.875,173.388 644.667,0.501 1139.833,0 1139.75,662.063 897.25,662.063">
    <title>Four</title>
  </polyline>
</svg>

CSS

.st0 {
	  fill: #0491B7;
	}
	
	.st1 {
	  fill: #0491B7;
	}
	
	.st1:hover {
	  fill: red;
	  opacity: 0.5;
	}
	
	.st0:hover {
	  fill: red;
	}