JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<svg>
  <rect y="10" x="20" width="20" height="20" class="test"></rect>
  <circle cy="20" cx="100" r="30" class="test"></circle>
  <line x1="30" y1="30" x2="100" y2="100" class="test" style="stroke-width:4px; stroke-dasharray:10 5;"></line>
  <ellipse cx="300" cy="100" rx="20" ry="40" style="fill:#2ab4ae;"></ellipse>
  <polyline points="400,100 500,100 400,50 400,100" style="stroke:#ad8faa; fill:none;"></polyline>
  <polygon points="100,300 200,300 200,400 100,300"></polygon>
</svg>

CSS

.test{
  fill:red;
  stroke:green;
}

html,body{
  margin:0;
  padding:0;
}

svg{
  width:100%;
  height:100%;
  overflow:auto;
  position:absolute;
  box-sizing:border-box;
  border:1px solid #000;
}