JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="grid" width="100%" height="100%" viewBox="0 0 1178 817" preserveAspectRatio="xMaxYMax" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">

    <path class="hex" data-col="1" data-row="1" d="M100,42L75,84L25,84L-4.996e-16,42L25,1.66533e-16L75,5.55112e-16L100,42Z"/>
    <path class="hex" data-col="1" d="M100,128L75,170L25,170L3.33067e-16,128L25,86L75,86L100,128Z"/>
    <path class="hex" data-col="1" d="M100,214L75,256L25,256L5.55112e-17,214L25,172L75,172L100,214Z"/>
    <path class="hex" data-col="1" d="M100,300L75,342L25,342L8.32667e-16,300L25,258L75,258L100,300Z"/>
    <path class="hex" data-col="1" d="M100,386L75,428L25,428L3.10862e-15,386L25,344L75,344L100,386Z"/>
    <path class="hex" data-col="1" d="M100,472L75,514L25,514L3.10862e-15,472L25,430L75,430L100,472Z"/>
    <path class="hex" data-col="1" d="M100,558L75,600L25,600L3.10862e-15,558L25,516L75,516L100,558Z"/>
    <path class="hex" data-col="1" d="M100,644L75,686L25,686L3.10862e-15,644L25,602L75,602L100,644Z"/>
    <path class="hex" data-col="1" d="M100,730L75,772L25,772L1.02141e-14,730L25,688L75,688L100,730Z"/>

    <path class="hex" data-col="2" d="M177,85L152,127L102,127L77,85L102,43L152,43L177,85Z"/>
    <path class="hex" data-col="2" d="M177,171L152,213L102,213L77,171L102,129L152,129L177,171Z"/>
    <path class="hex" data-col="2" d="M177,257L152,299L102,299L77,257L102,215L152,215L177,257Z"/>
    <path class="hex" data-col="2" d="M177,343L152,385L102,385L77,343L102,301L152,301L177,343Z"/>
    <path class="hex" data-col="2" d="M177,429L152,471L102,471L77,429L102,387L152,387L177,429Z"/>
    <path class="hex" data-col="2" d="M177,515L152,557L102,557L77,515L102,473L152,473L177,515Z"/>
    <path class="hex" data-col="2" d="M177,601L152,643L102,643L77,601L102,559L152,559L177,601Z"/>
    <path class="hex" data-col="2"...

CSS

#grid {
    margin: auto;
    max-width: 960px;
    /* -webkit-transform: perspective(800px) rotateX(60deg) translateY(-100px); */
/*     -webkit-transform: perspective(800px) rotateX(60deg) translateZ(-400px);
    -moz-transform: perspective(600px) rotateX(60deg);
    -ms-transform: perspective(600px) rotateX(60deg);
    -o-transform: perspective(600px) rotateX(60deg);
    transform: perspective(600px) rotateX(60deg); */
}

.hex {
    fill: rgb(102, 204, 102);
}

.hex:hover {
    fill: #ace63c;
}

JavaScript

$('.hex').on('click', function() {
    alert($(this).data('row'));
    $(this).css('fill', '#ADD');
});