JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="container">
  </div>
</body>


</html>

CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

div {
background-color: rgb(250, 235, 215);
border: solid 1px black;
}

#container {
width: 90vw;
height: 90vh;
}

svg {
border: green solid;
}

JavaScript

const svgNS = 'http://www.w3.org/2000/svg';

const container = document.querySelector('#container');

const svgContainerElm = document.createElementNS(svgNS, 'svg');

svgContainerElm.setAttribute('width', '100%');
svgContainerElm.setAttribute('height', '100%');


let greenRectangle = document.createElementNS(svgNS, 'rect');
greenRectangle.setAttribute('x', 20);
greenRectangle.setAttribute('y', 20);
greenRectangle.setAttribute('width', 70);
greenRectangle.setAttribute('height', 70);
greenRectangle.setAttribute('fill', 'green');

let rectangle = document.createElementNS(svgNS, 'rect');
rectangle.setAttribute('x', 20);
rectangle.setAttribute('y', 20);
rectangle.setAttribute('width', 50);
rectangle.setAttribute('height', 50);
rectangle.setAttribute('fill', 'red');

svgContainerElm.append(greenRectangle);
svgContainerElm.append(rectangle);

container.append(svgContainerElm);