JSFiddle - React, Tailwind, and code Playground

by Fernando Leal

HTML

<div id="mapa">
    <svg id="svg-mapa" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="490" viewBox="0 0 220000 194010">
        <path id="acre" class="estado" d="M6610 62120l290 160 1961 869 2186 996 836 418 161 65 2219 450 64 32 707 225 97 32 96 0 1962 482 289 65 1254 289 1447 354 1736 353 515 129 450 97 353 225 772 418 1769 964 964 547 547 289 1222 643 900 450 965 547 160 64 129 65 514 225 2058 900 1158 514 2893 1254 772 322 129 96 160 33 193 96 1222 515 868 385 -32 33 0 64 -32 0 32 64 -32 0 0 32 32 0 0 32 -32 0 -32 65 -32 -32 -32 -33 0 33 0 -33 -65 33 32 32 -32 64 -32 -32 0 64 -96 0 -97 32 -32 32 -32 0 -32 0 0 33 -32 32 -33 0 -32 32 -32 0 0 32 -32 0 0 64 -32 -32 -64 32 0 33 -65 32 0 32 0 32 -64 0 -32 64 -64 0 0 33 0 64 -65 32 0 -32 -64 0 -32 0 -32 0 32 64 0 32 -32 -32 -33 64 0 -32 0 65 -32 -33 -32 33 0 32 0 32 -64 0 0 32 0 -32 -32 32 32 32 0 32 -65 -32 -32 32 0 32 -32 0 -32 33 -32 128 -32 32 0 -64 -32 64 -33 0 0 -32 -32 32 32 0 -32 0 -64 65 0 -32 0 64 -32 32 64 0 -32 32 -32 32 0 -32 -32 32 0 65 -32 32 0 32 -33 -32 0 32 -32 0 -32 32 -32 -32 0 32 -32 0 -32 32 32 0 -129 65 -32 32 -32 0 0 -32 -32 0 -33 0 -64 32 -64 0 -32 32 0 64 32 32 -32 0 -32 32 -33 0 -64 33 -32 32 -64 0 -65 -65 -96 0 -32 -32 -65 0 -32 32 -96 33 -32 -33 -65 -32 -32 32 -32 -32 0 32 -64 -32 -32 32 -33 33 65 64 -32 64 32 65 0 32 -32 0 -33 32 -64 -32 -64 0 0 64 -64 -64 -65 32 -64 -32 -32 -32 -32 0 -65 96 33 64 0 129 -33 0 -32 0 -32 32 0 64 -32 33 -129 32 -32 32 -64 32 -65 -32 -64 32 0 64 -96 0 -32 0 -65 32 -96 33 -32 32 -97 160 -32 97 -96 96 -33 65 -96 96 -97 -64 -128 546 -32 -32 -32 32 -33 -32 0 32 -32 0 0 -32 -32 32 0 -32 -32 -64 -32 0 -32 -32 -32 0 -33 0 0 -32 -64 0 0 -32 -32 32 0 -65 -64 0 0 -32 -33 32 0 -32 -32 -32 -64 -32 -32 32 -32 -32 -33 0 -32 -32 -64 0 -64 0 -32 32 0 -32 -65 0 -32 64 -32 -32 -32 32 -64 0 0 -32 0 32 -65 -32 -96 64 -65 -32 -64 -32 0 32 -32 -32 0 32 -32 -32 -32 32 -33 0 0 64 -32 0 -64 0 -64 33 0 64 -32 -32 -33 64 -32 32 -32 32 -32 0 -32 65 0...

JavaScript

$("#mapa path").click(function(){
    alert('Voce clicou no estado do '+ this.id);
    $('.modal-estado').hide();
    $('[data-name="' + this.id + '"]').show();
});