JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div class="straightLine">
  <svg width="720" height="720" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 720">
    <!--<path class="st-0" d="M 21 443 L 46 453 L 67 437 L 81 414 L 106 406 L 132 418 L 143 447 L 123 462 L 122 497 L 148 504 L 178 502 L 209 493 L 230 510 L 239 533 L 267 531 L 298 520 L 313 491 L 324 461 L 351 450 L 378 448 L 407 451 L 439 452 L 462 473 L 470 504 L 497 511 L 525 522 L 548 548 L 581 564 L 619 564 L 651 565 L 678 559 L 669 528 L 648 499 L 650 469 L 650 447 L 657 413 L 669 383 L 659 348 L 641 320 L 648 292 L 676 285 L 704 284" />-->
    <path class="st-0" d="M 115 215 L 150 180 L 150 120 L 180 90 L 210 60 L 270 90 L 300 120 L 330 150 L 330 210 L 300 240 L 270 300 L 300 330 L 360 330 L 420 330 L 480 390 L 540 390 L 570 360 L 600 270 L 570 240 L 630 210 L 690 210 " />
    <!--<circle class="referStep" r="3" cy="454" cx="46"></circle>
    <circle class="referStep" r="3" cy="439" cx="67"></circle>
    <circle class="referStep" r="3" cx="81" cy="416"></circle>
    <circle class="referStep" r="8" cx="107" cy="405"></circle>
    <circle class="referStep" r="3" cx="134" cy="420"></circle>
    <circle class="referStep" r="3" cx="143" cy="446"></circle>-->

    <ellipse class="st0" cx="24" cy="44.5" rx="17.5" ry="1.5" />
    <g>
      <g>
        <path class="st20" d="M22.7,26.8L5,20.6v16.8c0,0.4,0.3,0.8,0.7,0.9l17,6c0.9,0.3,1.8,0.3,2.6,0l17-6c0.4-0.1,0.7-0.5,0.7-0.9V20.6l-17.7,6.2C24.5,27.1,23.5,27.1,22.7,26.8z" />
        <path class="st16" d="M25.3,26.8c-0.9,0.3-1.8,0.3-2.6,0L5,20.6v5l17.7,6.2c0.9,0.3,1.8,0.3,2.6,0L43,25.6v-5    L25.3,26.8z" />
        <path class="st4" d="M22.7,26.8L5,20.6v16.8c0,0.4,0.3,0.8,0.7,0.9l17,6c0.9,0.3,1.8,0.3,2.6,0l17-6 c0.4-0.1,0.7-0.5,0.7-0.9V20.6l-17.7,6.2C24.5,27.1,23.5,27.1,22.7,26.8z" />
        <line class="st88" x1="24" y1="42.7" x2="24" y2="29.2" />
      </g>
      <g>
        <path class="st20"...

CSS

svg {
  width: 720px;
  background-image: url('https://variabet.com/images/terrain-football.jpg');
  background-position: 0 0;
  background-repeat: no-repeat;
}

.straightLine {
  position: relative;
}

.aze:hover {
  fill: red;
}

.st-0 {
  fill: none;
  stroke: #000000;
  stroke-width: 3;
  stroke-dasharray: 1, 5;
  stroke-linecap: round;
}

.st0 {
  opacity: 0.15;
  fill: #45413C;
}

.st1 {
  fill: #DAEDF7;
  stroke: #45413C;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.st2 {
  fill: #656769;
}

.st3 {
  fill: #87898C;
}

.st4 {
  fill: none;
  stroke: #45413C;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.st5 {
  fill: #DAEDF7;
}

.st6 {
  fill: #E8F4FA;
}

.st7 {
  fill: #FFFFFF;
}

.st8 {
  fill: #E0E0E0;
}

.st9 {
  fill: #00B8F0;
}

.st10 {
  fill: #FF6242;
  stroke: #45413C;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.st11 {
  fill: #FFE500;
  stroke: #45413C;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.st12 {
  fill: #00DBA8;
  stroke: #45413C;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.st13 {
  fill: #BF8DF2;
  stroke: #45413C;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.st14 {
  fill: #00B8F0;
  stroke: #45413C;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.st15 {
  fill: #87898C;
  stroke: #45413C;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.st16 {
  fill: #FF6242;
}

.st17 {
  fill: #E04122;
}

.st18 {
  fill: #9CEB60;
}

.st19 {
  fill: #6DD627;
}

.st20 {
  fill: #FF866E;
}

.st21 {
  fill: #F0F0F0;
}

.st22 {
  fill: #009FD9;
}

.st23 {
  fill: #656769;
  stroke: #45413C;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.st24 {
  fill: #ADC4D9;
}

.st25 {
  fill: #8CA4B8;
}

.st26 {
  fill: #BDBEC0;
}

.st27 {
  fill: #C0DCEB;
  stroke:...