JSFiddle - React, Tailwind, and code Playground

by ksumarine

HTML

<div id="test"></div>

JavaScript

const svgPlus = () => {
  let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  let rBG = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  rBG.setAttributeNS(null, 'stroke', '#000');
  rBG.setAttributeNS(null, 'stroke-width', 2);
  rBG.setAttributeNS(null, 'width', '100%');
  rBG.setAttributeNS(null, 'height', '100%');
  rBG.setAttributeNS(null, 'fill', '#FFF');

  let lnH = document.createElementNS('http://www.w3.org/2000/svg', 'line');
  lnH.setAttributeNS(null, 'stroke', 'red');
  lnH.setAttributeNS(null, 'stroke-width', 12.5);
  lnH.setAttributeNS(null, 'x1', '0');
  lnH.setAttributeNS(null, 'y1', '25');
  lnH.setAttributeNS(null, 'x2', '50');
  lnH.setAttributeNS(null, 'y2', '25');

  let lnV = document.createElementNS('http://www.w3.org/2000/svg', 'line');
  lnV.setAttributeNS(null, 'stroke', 'red');
  lnV.setAttributeNS(null, 'stroke-width', 12.5);
  lnV.setAttributeNS(null, 'x1', '25');
  lnV.setAttributeNS(null, 'y1', '0');
  lnV.setAttributeNS(null, 'x2', '25');
  lnV.setAttributeNS(null, 'y2', '50');

  g.appendChild(rBG);
  g.appendChild(lnH);
  g.appendChild(lnV);

  return g;
};
const thmUp = () => {
  let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  let rBG = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  rBG.setAttributeNS(null, 'stroke', '#000');
  rBG.setAttributeNS(null, 'stroke-width', 2);
  rBG.setAttributeNS(null, 'width', '100%');
  rBG.setAttributeNS(null, 'height', '100%');
  rBG.setAttributeNS(null, 'fill', '#FFF');
  
  let pth = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  pth.setAttributeNS(null, 'd', `M13.648,7.362c-0.133-0.355,3.539-3.634,1.398-6.291c-0.501-0.621-2.201,2.975-4.615,4.603C9.099,6.572, 6,8.484,6,9.541 v6.842C6,17.654,10.914,19,14.648,19C16.017,19,18,10.424,18,9.062C18,7.694,13.779,7.718,13.648,7.362z M5,7.457...