JSFiddle - React, Tailwind, and code Playground

by StepBaro

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>
  </head>
  <body>
    <div id="main"></div>
    
  </body>
</html>

JavaScript

const holder = document.createElement("div");
const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1.setAttribute("width", "400");
svg1.setAttribute("height", "50");
holder.id = "getShitDoneID";
console.log(holder);

// Left Circle
const circ1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circ1.setAttribute("fill", "#F3EAE8");
circ1.setAttribute("cx", 25);
circ1.setAttribute("cy", 25);
circ1.setAttribute("r", 25);

// Right Circle
const circ2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circ2.setAttribute("fill", "#F3EAE8");
circ2.setAttribute("cx", 375);
circ2.setAttribute("cy", 25);
circ2.setAttribute("r", 25);

// Center Rectangle
const txtBox = document.createElementNS("http://www.w3.org/2000/svg", "rect");
txtBox.setAttribute("x", 25);
txtBox.setAttribute("y", 0);
txtBox.setAttribute("height", 50);
txtBox.setAttribute("width", 350);
txtBox.setAttribute("fill", "#F3EAE8");

// Text that contains Task
var text = document.createElementNS("ttp://www.w3.org/2000/svg", "text");
text.setAttribute("x", 0);
text.setAttribute("y", 10);
//text.setAttribute("textLength", "6em");
text.setAttribute("fill", "red");

var innerText = document.createTextNode(
  "Double"
);



svg1.appendChild(circ1);
svg1.appendChild(txtBox);
svg1.appendChild(circ2);

holder.appendChild(svg1);


//console.log(document.querySelector("body"));
document.querySelector("body").appendChild(holder);

text.appendChild(innerText);
holder.getElementById("SVG").appendChild(text);