JSFiddle - React, Tailwind, and code Playground

by ttquang1063750

HTML

<textarea id="txtCSS" name="txtCSS" rows="4" cols="50">
    .FC{color:green;}
</textarea>

<label class="FC">Some Text</label>

JavaScript

function render(value) {
  let previewStyle = document.getElementById('previewStyle');
  if(!previewStyle) {
    addStyle(value);
  }else {
    previewStyle.innerText = value; 
  }
}

function addStyle(styles) { 
  /* Create style document */ 
  const css = document.createElement('style'); 
  css.type = 'text/css'; 
  css.id = 'previewStyle'; 

  if (css.styleSheet){
   css.styleSheet.cssText = styles; 
  } else {
   css.appendChild(document.createTextNode(styles)); 
  } 

  /* Append style to the tag name */ 
  document.getElementsByTagName("head")[0].appendChild(css); 
}

const text = document.getElementById('txtCSS');
text.addEventListener('input', (e) => {
 const content = e.target.value;
 render(content);
});

render(text.value);