JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect id="svg_1"/>
  <rect id="svg_2"/>  
</svg>

CSS

#svg_1, #svg_2
{
    fill: transparent;
    stroke:#888;
    stroke-width: 4;
    cursor: pointer;
    width:100px;
    height:50px;
    x:50px;
    y:20px;
}
#svg_2{
    x:50px;
    y:90px;
}
#svg_1:hover, #svg_2:hover
{
    stroke:#000;  
    fill:#f00;
}