JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<svg id="Group_2" data-name="Group 2" xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500">
  <g id="Rectangle_82" data-name="Rectangle 82" fill="#fff" stroke="#707070" stroke-width="1">
    <rect width="1000" height="500" stroke="none"/>
    <rect x="0.5" y="0.5" width="999" height="499" fill="none"/>
  </g>
  <line id="line" data-name="Line 4" x2="700" transform="translate(150.5 250.5)" fill="none" stroke="#707070" stroke-width="1"/>
    <line id="lines" data-name="Line 4" x2="700" transform="translate(150.5 250.5)" fill="none" stroke="#707070" stroke-width="1"/>
</svg>

CSS

#line {
  stroke: #343C4A;
  stroke-width:70px;
  stroke-linecap: round;
}

#lines {
  stroke: #646D7D;
  stroke-width: 40px;
  stroke-linecap: round;
}