JSFiddle - React, Tailwind, and code Playground

by shahryar saljoughi

HTML

<div style="">
    <svg preserveAspectRatio="none" style="
    width: 100%;
    height: 100%;
    position: absolute;
    right: 5px;
    margin:  auto;
    top:  0px;
    z-index: 1;
    border: solid black;
    padding: 0;
    /* overflow-x: auto; */
    /* overflow-y: auto; */
" viewbox="0 0 100 100">
    <polyline points="30,100 60,100 70,40 20,40 30,100" style="stroke: red;stroke-width:2;color: red;fill:  red;"></polyline>
    <polygon points="14,40, 76,40 73,32 17,32" style="stroke: red;stroke-width: 3;fill: #ff9292;"></polygon>
    <rect x="42" y="29" width="6" height="6" style="stroke: red;fill:  red;"></rect>
    <line x1="33" y1="50" x2="33" y2="75" style="stroke: #ff9292; stroke-width: 3;"></line>
    <line x1="43" y1="50" x2="43" y2="75" style="stroke: #ff9292; stroke-width: 3;"></line>
    <line x1="53" y1="50" x2="53" y2="75" style="stroke: #ff9292; stroke-width: 3;"></line>

    
    </svg>
</div>