JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 600 550" enable-background="new 0 0 600 550" xml:space="preserve">
<g id="Layer_1" display="none">
        <rect display="inline" fill="#6D6E71" width="600" height="550"/>
</g>
<g id="opony">
        <g>
               <a href="#" class="svg">
                        <circle fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#231F20" stroke-width="10.1361" stroke-miterlimit="10" cx="478.107" cy="353.002" r="114.033"/>
            </a>
        </g>
        <g>
               <a href="#" class="svg">
                        <circle fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#231F20" stroke-width="10.1361" stroke-miterlimit="10" cx="124.076" cy="353.002" r="114.033"/>
            </a>
        </g>
</g>
<g id="felgi">
       
                <circle fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#E6E7E8" stroke-width="9.6053" stroke-miterlimit="10" cx="478.107" cy="353" r="103.932"/>
       
                <circle fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#E6E7E8" stroke-width="9.6053" stroke-miterlimit="10" cx="124.076" cy="353" r="103.932"/>
</g>
<g id="siodelko-dodatki">
        <g>
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#CBCBCB" d="M217.428,168.17c-1.001,1.48-2.754,0.86-4.696,1.542
                        c3.683,1.464,4.398,3.924,4.945,7.323c1.073,6.669,3.258,13.171,5.143,19.696c4.837,16.746,9.656,33.498,14.713,50.178
                        c1.595,5.261-3.523,5.793-5.373,9.938c-6.139-21.02-11.839-40.913-17.801-60.727c-1.86-6.18-2.833-12.683-5.83-18.457
                       ...

CSS

html{background-color:#666;}
#felgi:hover circle {
    stroke: green;
    fill: silver;
}
a.svg {
  position: relative;
  display: inline-block; 
  cursor:pointer;
}
a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}

JavaScript

$(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $( ".svg" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
$( "#dialog button" ).click(function() {
      $("#opony circle").css("stroke",this.id);
    });