JSFiddle - React, Tailwind, and code Playground

HTML

<textarea rows="3" id="rules">
body { background: BurlyWood; }
div  { background: DarkGreen; color: Snow; }
div:hover { color: Black !important; }
</textarea>

<button id="btn" onclick="injectCSS( document.getElementById('rules').value )">Injects styles from the textarea</button>

<div>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat erat ut neque malesuada ut semper libero molestie.
	Maecenas iaculis felis a libero ultrices at pharetra odio luctus.
</div>

<style>
body { background: AntiqueWhite; }
div  { background: DarkGray; color: DarkBlue; }
</style>

CSS

body, textarea, button, div {
	display: block; width: 600px; padding: 2px 6px; margin: 10px auto;
}
#btn { width: 250px; }

JavaScript

// It's more appropriate to init this function after the DOM is ready
window.injectCSS = (function(doc){
	// wrapper for all injected styles and temp el to create them
	var wrap = doc.createElement('div');
	var temp = doc.createElement('div');
	// rules like "a {color: red}" etc.
	return function (cssRules) {
		// append wrapper to the body on the first call
		if (!wrap.id) {
			wrap.id = 'injected-css';
			wrap.style.display = 'none';
			doc.body.appendChild(wrap);
		}
		// <br> for IE: http://goo.gl/vLY4x7
		temp.innerHTML = '<br><style>'+ cssRules +'</style>';
		wrap.appendChild( temp.children[1] );
	};
})(document);