JSFiddle - React, Tailwind, and code Playground

by Marian Rick

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="legend">
  <ul>
    <li id="t1">T1</li>
    <li id="t2">T2</li>
    <li id="t3">T3</li>
    <li id="t4">T4</li>
  </ul>
</div>
<div id="rsr"></div>

CSS

//my css
.hovered {
  background: #8b2332;
}
li:hover {
  background: #8b2332;
}

/* style demo */
ul {
  margin: 0;
  padding: 10px;
  background: #494949;
}

ul:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px;
}

li {
  float: left;
  display: inline-block;
  margin-right: 10px;
  font-family: sans-serif;
  border-radius: 6px;
  padding: 6px;
  color: #fff;
}

JavaScript

// create responsive raphaeljs paper
var w = 200;
var h = 100;
var rsr = Raphael('rsr');
rsr.setViewBox(0, 0, w, h, true);

var svg = document.querySelector("svg");
svg.removeAttribute("width");
svg.removeAttribute("height");

// draw example t1, t2, t3, t4
var t1 = rsr.path("M 32.3,21 38.1,38.7 56.8,38.7 41.7,49.7 47.5,67.5 32.3,56.5 17.2,67.5 23,49.7 7.9,38.7   26.6,38.7  z");
t1.attr({
  id: 't1',
  fill: '#e6e6e6',
  'stroke-width': '0',
  'stroke-opacity': '1'
}).data('id', 't1');
var t2 = rsr.path("M 91.5,54.1 94.6,63.4 104.3,63.4 96.4,69.1 99.4,78.4 91.5,72.7 83.6,78.4 86.6,69.1   78.7,63.4 88.5,63.4  z");
t2.attr({
  id: 't2',
  fill: '#e6e6e6',
  'stroke-width': '0',
  'stroke-opacity': '1'
}).data('id', 't2');
var t3 = rsr.path("M 118.2,3.6 124.2,21.9 143.4,21.9 127.8,33.2 133.8,51.5 118.2,40.2 102.6,51.5 108.6,33.2   93,21.9 112.3,21.9  z");
t3.attr({
  id: 't3',
  fill: '#e6e6e6',
  'stroke-width': '0',
  'stroke-opacity': '1'
}).data('id', 't3');
var t4 = rsr.path("M 166.6,43 172.7,61.7 192.5,61.7 176.5,73.3 182.6,92.1 166.6,80.5 150.7,92.1 156.8,73.3   140.8,61.7 160.5,61.7  z");
t4.attr({
  id: 't4',
  fill: '#e6e6e6',
  'stroke-width': '0',
  'stroke-opacity': '1'
}).data('id', 't4');

//////////////////////////
// bind both hovers
$('#t1').hover(function() {
  t1.attr({
    fill: '#8b2332'
  });
}, function() {
  t1.attr({
    fill: '#e6e6e6'
  });
});

t1.hover(function() {
  $('#t1').addClass('hovered');
}, function() {
  $('#t1').removeClass('hovered');
});

// t2 hover
$('#t2').hover(function() {
  t2.attr({
    fill: '#8b2332'
  });
}, function() {
  t2.attr({
    fill: '#e6e6e6'
  });
});

t2.hover(function() {
  $('#t2').addClass('hovered');
}, function() {
  $('#t2').removeClass('hovered');
});


// t3 hover
$('#t3').hover(function() {
  t3.attr({
    fill: '#8b2332'
  });
}, function() {
  t3.attr({
    fill: '#e6e6e6'
  });
});

t3.hover(function() {
  $('#t3').addClass('hovered');
}, function() {
 ...