JSFiddle - React, Tailwind, and code Playground

HTML

<div id="svg-container">
    <svg id="mySVG" width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'>
        <polygon id="ok" points="25,25 75,25 75,75 25,75" />
        <polygon id="up" points="0,0 100,0 75,25 25,25" />
        <polygon id="right" points="100,0 100,100 75,75 75,25" />
        <polygon id="down" points="0,100 25,75 75,75 100,100" />
        <polygon id="left" points="0,0 25,25 25,75 0,100" />
    </svg>
</div>

CSS

#svg-container {
    width: 100%;
    height: 100%;
}

svg {
    background:#000000;
}
#ok {
    fill: red;
}
#up {
    fill: blue;
}
#down {
    fill: green;
}
#right {
    fill: yellow;
}
#left {
    fill: orange;
}

polygon:hover {opacity:0.75;}

JavaScript

$(document).ready(function() {
    $("polygon").on("click", function() {
        alert($(this).attr("id"));
    });
});