JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<svg class="map__image" width="244" height="245" viewBox="0 0 244 245" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="map__region js-map-region" id="circle1" fill-rule="evenodd" clip-rule="evenodd" d="M135.996 145.256C135.996 147.368 138.301 148.61 139.9 147.229C146.695 141.361 150.996 132.683 150.996 123C150.996 113.317 146.695 104.639 139.9 98.7706C138.301 97.39 135.996 98.6311 135.996 100.743C135.996 101.553 136.366 102.313 136.97 102.852C142.509 107.797 145.996 114.991 145.996 123C145.996 131.009 142.509 138.203 136.97 143.147C136.366 143.686 135.996 144.447 135.996 145.256Z" fill="#858585" fill-opacity="0.4"></path>
<path class="map__region js-map-region" id="circle2" fill-rule="evenodd" clip-rule="evenodd" d="M127.763 150.583C127.889 152.197 129.473 153.29 130.975 152.684C142.714 147.942 150.998 136.439 150.998 123.001C150.998 107.805 140.406 95.0837 126.203 91.8152C124.626 91.4523 123.233 92.7784 123.36 94.3918C123.451 95.5585 124.329 96.501 125.466 96.7803C137.254 99.6783 145.998 110.318 145.998 123.001C145.998 134.2 139.18 143.806 129.468 147.896C128.39 148.349 127.671 149.417 127.763 150.583Z" fill="#20A7E6"></path>
<path class="map__region js-map-region" id="circle3" fill-rule="evenodd" clip-rule="evenodd" d="M72.5022 123.503C72.4779 123.036 71.998 123.034 71.998 123.501C71.998 124.352 72.0204 125.198 72.0647 126.039C72.1016 126.741 72.6674 126.682 72.6309 125.98L72.5022 123.503ZM136.7 164.176C136.79 165.918 138.563 167.056 140.133 166.297C156.031 158.617 166.998 142.34 166.998 123.501C166.998 102.914 153.901 85.3857 135.584 78.7941C133.944 78.2038 132.3 79.5188 132.39 81.2599C132.445 82.3198 133.153 83.2283 134.15 83.5942C150.403 89.5633 161.998 105.178 161.998 123.501C161.998 140.26 152.298 154.753 138.206 161.673C137.254 162.14 136.645 163.117 136.7 164.176Z" fill="#858585" fill-opacity="0.4"></path>
<path class="map__region js-map-region"...
CSS
body {
background: green;
}