JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
<body>
      <div id="map"></div>
 </body>

CSS

#pink, #red, #orange, #yellow {-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;}
#pink:hover {fill:#de6da1;}
#red:hover {fill:#ed1b24;}
#orange:hover {fill:#f36f24}
#yellow:hover {fill:#fece0a}
#red:active, #pink:active, #orange:active, #yellow:active {
    transform-origin: center center;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -ms-transform: scale(1.4) translate(0); /* IE 9 */
    -webkit-transform: scale(1.4) translate(0); /* Chrome, Safari, Opera */
    transform: scale(1.4) translate(0);}

JavaScript

//Avvia mappa
var MAP_WIDTH  = 581;
var MAP_HEIGHT = 490;

var mapContainer = document.getElementById("map");
var map = new Raphael(mapContainer, MAP_WIDTH, MAP_HEIGHT);

//Default
var style = {
  fill: "#fff",
  stroke: "#797979",
  "stroke-width": 2,
  "stroke-linejoin": "miter",
  cursor: "pointer"
};

var sup = {
  fill: "#fff",
  stroke: "#797979",
  "stroke-width": 2,
  "stroke-linejoin": "miter"
};


//Superficie
map.path("M 7.798,10.14 500.266,10.14    500.266,369.174 464.453,369.174 464.453,387.873 291.891,387.873 73.294,387.873 40.138,387.873 40.138,373.287 7.798,373.287      z").attr(sup);

//////////////////////////////////////////////
//Abbigliamento
var rosa = {};
rosa["2"] = map.path("M 361.414,300.778 354.578,307.089 354.433,362.433 367.838,362.433 367.838,373.704     430.308,373.704 430.308,300.778    z");
rosa["4"] = map.path("M 326.896,373.593 326.896,363.609 347.391,363.609 347.391,306.804 341.781,301.02 264.493,301.02     264.493,337.675 269.733,342.916 269.64,373.593    z");
rosa["5"] = map.path("M 240.633,300.778c0-0.394-41.99-0.197-63.07-0.074v11.323H160.7l0.036,61.726h75.203l-0.214-29.676    l4.909-5.434C240.633,338.643,240.633,301.303,240.633,300.778 z");

for(var civico in rosa) {
    rosa[civico].attr(style).node.id = 'pink';
}

/////////////////////////////////////////////
//Cultura
var arancio = {};
arancio["3"] = map.path("M 354.578,307.089 361.181,300.544 373.575,300.544 373.575,309.04 354.578,309.039    z");
arancio["7"] = map.path("M 113.015,300.954 113.015,365.639 129.493,365.639 129.636,373.527 129.493,365.639     134.356,365.541 134.467,353.893 128.441,300.602    z");
arancio["8"] = map.path("M 93.731,300.954 113.015,300.954 113.015,365.765 129.493,365.765 129.493,373.668 93.978,373.668        z");
arancio["9"] = map.rect(445.229, 260.62, 39, 19);
arancio["10"] = map.rect(412.147, 260.62, 39, 19);

for(var civico in arancio) {
    arancio[civico].attr(style).node.id =...