JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="raphaelContainer">

</div>

JavaScript

var width = 300,
    height = 300,
    paper_offset = 50,
    maxX = width,
    maxY = height,
    //paper = Raphael(paper_offset, paper_offset, 1000, 1000),
    paper = Raphael(document.getElementById("raphaelContainer"), 1000,1000),
    dragging;


 var gaz = paper.rect(paper_offset, paper_offset, 180, 70).attr({"stroke": '#e1e4e4'});
 var t = paper.text(paper_offset + 90 + 10, paper_offset + 35, "GAZ NATUREL");
 t.attr({ "font-size": 16, "font-family": "Arial, Helvetica, sans-serif" });
 var c = paper.circle(paper_offset + 220, paper_offset + 35, 18).attr({"stroke": '#e1e4e4'});
 gaz.blur(0.6);
 c.blur(0.6);
 var numberLot = paper.text(paper_offset + 220 , paper_offset + 35, "10").attr({ "font-size": 16, "font-family": "Arial, Helvetica, sans-serif", "cursor":"pointer" });
 numberLot.translate((18 - numberLot.getBBox().width) / 2,  (18 - numberLot.getBBox().height) / 2 );


var hoverIn = function() {
	// if the context is not stated forcefully, this refers to the element in context.
  // can be any valid cursor types.
  this.attr({"cursor": "pointer"});
};

var hoverOut = function() {
  this.attr({"cursor": "default"});    
}
// simple click callback.
var clickFN = function (){
	alert('Hey you just clicked me :p, Thanks!!!')
};


		// attaching the hovering callbacks.
		c.hover(hoverIn, hoverOut).attr({
        "fill": "#fff"
    }).click(clickFN);
    numberLot.hover(hoverIn, hoverOut).click(clickFN);
    gaz.hover(hoverIn, hoverOut)
    // these are just additional cosmetics and fuctionalities.
		.attr({
        "fill": "#fff"
    })
    .click(clickFN);
    var img1 = paper.image("https://demo.bootstrapthemes.co/html/made-design-agency-free-bootstrap-temmplate/assets/images/team2.jpg", 60, 65, 25, 40)
           .attr({ "clip-rect": "20,40,300,300", "z-index": 200 });
            var img1 = paper.image("https://demo.bootstrapthemes.co/html/made-design-agency-free-bootstrap-temmplate/assets/images/team2.jpg", 100, 200, 25, 40)
           .attr({ "clip-rect":...