JSFiddle - React, Tailwind, and code Playground

by coder _303

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 "/>
<polygon class="st1" points="0,353.813 649,353.813 891.5,663.313 0,663.313 "/>
<polygon class="st0" points="392.5,347.313 514.75,179.813 645.25,347.313 "/>
<polyline class="st0" points="518.875,173.388 644.667,0.501 1139.833,0 1139.75,662.063 897.25,662.063 "/>
</svg>

CSS

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