JSFiddle - React, Tailwind, and code Playground

HTML

<div id="human_body_container" style="width:145px; height: 250px;">
    <svg id="human_body" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/" x="0px" y="0px" viewBox="0 0 145 250">
        <style>
            .st0 {
                stroke: #010101;
                stroke-width: 0.4;
                stroke-miterlimit: 10;
            }

        </style>
        <g id="Skull">
            <polygon id="XMLID_25_" class="st0" points="59.2,9.4 69.5,11 75.4,11 80.4,10.2 79.2,6.4 75.3,2.8 72.3,1.4 67.2,1.4 61.4,5 
    59.9,6.9 " />
        </g>
        <g id="Right_ear">
            <polygon id="XMLID_24_" class="st0" points="60.7,24.7 61.3,20.7 59.7,15.9 58.7,15.9 57.5,17.5 57.5,22.2 " />
        </g>

CSS

.st0 {
    fill: rgba(230, 230, 230, 0.5);
    transition: .3s;
}

.st0:hover {
    fill: rgba(180, 180, 180, 1);
    cursor: pointer;
}

JavaScript

$(document).on('click', '.st0', function() {
    $(this).css('fill', 'red');
});