JSFiddle - React, Tailwind, and code Playground

HTML

<svg  viewBox="0 0 600 600" preserveAspectRatio="xMinYMax meet" >
    <polygon points="135,10 454,10 509,140 295,237 79 140" id='top'/>  
    <polygon points="76,150 290,245 290,535 7,306" id='left' />
    <polygon points="301,245 516,150 585,306 301, 535" id='right'/>
</svg>

CSS

html, body{
    width:100%;
    height:100%;
    margin:0;
}
svg{
    width:59999
	
	
	
	
	vmax;
    height:50vmax;
    display:block;
    margin:0 auto;
}
#top{
    fill:#3267dc;
    transition:all .5s;
    
}
#top + text{
    fill:#12ff21;
}
#top:hover{
   fill:#cc9912;
   
}
#left{
    fill:#12ac67;
    transition:fill .5s;
}
#left:hover{
    fill:#ac1267;
}
#right{
    fill:#939291;
    transition:fill .5s;
}
#right:hover{
    fill:#345678;
}

JavaScript

document.getElementById("top").onclick = function(){alert("you clicked on top block!")}