JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main_wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" width="500pt" height="600pt">
<defs>
<linearGradient id="linearGradient172">
<stop style="stop-color:#3f2600;stop-opacity:0.6;" offset="0" id="stop173" />
<stop style="stop-color:#3f2600;stop-opacity:0;" offset="1" id="stop174" />
</linearGradient>
<linearGradient id="linearGradient167">
<stop style="stop-color:#ffffff;stop-opacity:0.65;" offset="0" id="stop168" />
<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop169" />
</linearGradient>
<linearGradient id="linearGradient162">
<stop style="stop-color:#ffa63f;stop-opacity:1;" offset="0" id="stop163" />
<stop style="stop-color:#ffff00;stop-opacity:1;" offset="1" id="stop164" />
</linearGradient>
<linearGradient id="linearGradient153">
<stop style="stop-color:#ffeed7;stop-opacity:1;" offset="0" id="stop154" />
<stop style="stop-color:#bdbfc2;stop-opacity:1;" offset="1" id="stop155" />
</linearGradient>
<linearGradient id="linearGradient138">
<stop style="stop-color:#ffffff;stop-opacity:0.8;" offset="0" id="stop139" />
<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop140" />
</linearGradient>
<linearGradient xlink:href="#linearGradient138" id="linearGradient141" x1="0.47424799" y1="0.020191999" x2="0.417539" y2="0.90125799" gradientUnits="objectBoundingBox" />
<linearGradient xlink:href="#linearGradient167" id="linearGradient142" x1="0.55880702" y1="0.031192999" x2="0.553922" y2="0.94531101" gradientUnits="objectBoundingBox"...
JavaScript
$(document).ready(function () {
$('path').click(function () {
alert($(this).attr('id'));
});
});