JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<div id="sheets">
    
  </div>
  <button>Press this button to add stylesheet</button>
  <p>Inspect this element and press the button</p>

JavaScript

document.querySelector("button").onclick = function() {
  document.querySelector("#sheets").innerHTML = "<style>"+generateCssText()+"</style>"
};


 
function generateCssText() {
var color = "rgb(" + (Math.floor(Math.random()*256)) + ", " +
(Math.floor(Math.random()*256)) + ", " +
(Math.floor(Math.random()*256)) + ")";
var font = ["Arial", "Verdana", "Times New Roman", "Georgia"][
Math.floor(Math.random() * 4)
];
 
return "p {color:" + color + "; width:" + Math.round(Math.random() * 300) +
"px; font:14px " + font + ";}";
}