JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 97.8 37.8" id="menu-item" xml:space="preserve">
<g>
	
		<image style="overflow:visible;" width="481" height="220" id="image"...

CSS

/*defaults*/
.shape{
	fill:red;
	stroke:transparent;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
}
#menu-item{
	display:none;
}

ul{
	margin:0;
	padding:0;
	width:100%;
	display:flex;
	justify-content:flex-start;
	border-top:10px solid #000;
}
li{
	list-style-type:none;
	flex:1;
	width:20%;
	position:relative;
	margin-top:-2px;
}
li + li{
	margin-left:-20px;
}
li a{
	display:block;
	text-align:center;
	font-size:18px;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:capitalize;
	transition:color .4s;
  line-height:1;
}
li a span{
	position:absolute;
	top:50%;
	margin-top:-0.6em;
	left:0;
	right:0;
}

svg{
	display:block;
	width:100%;
}
li a:hover{
	color:#aaa;
}
li .shape{
	transition:fill .4s;
}
li:nth-child(1){
	z-index:9;
}
li:nth-child(1) .shape{
	fill:blue;
}
li:nth-child(1):hover .shape{
	fill:darkblue;
}

li:nth-child(2){
	z-index:8;
}
li:nth-child(2) .shape{
	fill:green;
}
li:nth-child(2):hover .shape{
	fill:darkgreen;
}
li:nth-child(3){
	z-index:1
  ;
}
li:nth-child(3) .shape{
	fill:yellow;
}
li:nth-child(3):hover .shape{
	fill:orange;
}
li:nth-child(4){
	z-index:6;
}
li:nth-child(4) .shape{
	fill:black;
}
li:nth-child(4):hover .shape{
	fill:darkgrey;
}
li:nth-child(5){
	z-index:5;
}
li:nth-child(5) .shape{
	fill:purple;
}
li:nth-child(5):hover .shape{
	fill:mediumpurple;
}