JSFiddle - React, Tailwind, and code Playground

by LĂ©o Durand

HTML

<svg id="frame_svg" viewBox="0 0 1712 490" preserveAspectRatio="none">



<polyline class="svg" points="128.7,346 128.7,136.3 221.7,290 314.7,136.3 314.7,346 "/>
<path class="svg" d="M412.7,269c0,43.1,34.9,78,78,78c43.1,0,78-34.9,78-78"/>
<line class="svg" x1="412.7" y1="269" x2="412.7" y2="136.3"/>
<line class="svg" x1="568.7" y1="136.3" x2="568.7" y2="269"/>
<path class="svg" d="M1237.9,268.3c0,43.1,34.9,78,78,78c43.1,0,78-34.9,78-78"/>
<line class="svg" x1="1237.9" y1="268.3" x2="1237.9" y2="135.7"/>
<line class="svg" x1="1393.9" y1="135.7" x2="1393.9" y2="268.3"/>
<path class="svg" d="M763.7,156c0,0-17.3-19.7-48.3-19.7s-54,20-54,44s6.3,41.3,58,58c51.7,16.7,52,47,52,56s-5.3,51-55,51
	c-49.7,0-65.7-34-65.7-34"/>
<line class="svg" x1="863" y1="136.3" x2="863" y2="345.3"/>
<ellipse class="svg" cx="1051.5" cy="241.2" rx="100.5" ry="105.3"/>
<line class="svg" x1="1066.3" y1="249" x2="1154" y2="345.3"/>
<polyline class="svg" points="1596.7,138.3 1491.7,138.3 1491.7,342.3 1599.3,342.3 "/>
<line class="svg" x1="1575.3" y1="228" x2="1491.7" y2="228"/>
</svg>

CSS

#frame_svg {

    position: fixed;
    left: 10vw; top: 10vh;
    width: 80vw; height: 80vh;
}
.svg{

    fill:none;
    stroke:#333333;
    stroke-width:10;
    vector-effect:non-scaling-stroke;
    stroke-linejoin:round;
    stroke-linecap:round;
}