JSFiddle - React, Tailwind, and code Playground

by ten1seven

HTML

<button class="button" data-color="red">Red</button>
<button class="button" data-color="green">Green</button>

JavaScript

var sheet = (function() {
	var style = document.createElement('style');
	style.setAttribute('media', 'screen');
	style.appendChild(document.createTextNode(''));

	document.head.appendChild(style);

	return style.sheet;
})();

var button = document.querySelectorAll('.button');
for (var i = 0; i < button.length; i++) {
	button[i].onclick = function() {
		var color = this.getAttribute('data-color');
		if (sheet.cssRules.length) {
			sheet.deleteRule(0);
		}
	
		sheet.insertRule('body { background: ' + color + '; }', 0);
	}
}