JSFiddle - React, Tailwind, and code Playground

by Cohars

HTML

<svg xmlns="http://www.w3.org/2000/svg" height="210" width="500">
  <line x1="0" y1="25" x2="300" y2="25" style="stroke:green;stroke-width:2"/>
  <rect x="0.0" y="20" width="28.475336322869957" height="10" style="fill:black ;stroke-width:;stroke:rgb(0,0,0)"/>
  <line x1="28.475336322869957" y1="20" x2="40.02242152466368" y2="11.11111111111111" style="stroke:#5e5a5d;stroke-width:2; stroke-dasharray:5,2 "/>
  <line x1="40.02242152466368" y1="11.11111111111111" x2="51.5695067264574" y2="20.0" style="stroke:#5e5a5d;stroke-width:2; stroke-dasharray:5,2 "/>
  <rect x="51.5695067264574" y="20" width="12.780269058295964" height="10" style="fill:black ;stroke-width:;stroke:rgb(0,0,0)"/>
  <line x1="64.34977578475336" y1="20" x2="85.76233183856502" y2="11.11111111111111" style="stroke:#5e5a5d;stroke-width:2; stroke-dasharray:5,2 "/>
  <line x1="85.76233183856502" y1="11.11111111111111" x2="107.17488789237669" y2="20.0" style="stroke:#5e5a5d;stroke-width:2; stroke-dasharray:5,2 "/>
  <rect x="107.17488789237669" y="20" width="192.8251121076233" height="10"/>
</svg>

CSS

svg rect {
  fill: tomato;
  stroke: midnightblue;
  transition: all .2s ease-in;
}

svg:hover rect {
  fill: lightslategray;
  stroke: lightslategray;
}