JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="target">Lorem ipsum</div>
    <div>
        <button class="rule1" data-color="blue">Color: blue</button>
        <button class="rule1" data-color="red">Color: red</button>
        <button class="del1">Remove color</button>
    </div>
        <div>
        <button class="rule2" data-size="10px">Size: 10px</button>
        <button class="rule2" data-size="20px">Size: 20px</button>
        <button class="del2">Remove size</button>
    </div>
</div>
<div>
    Stylesheet's contents:
    <textarea id="output"></textarea>
</div>

CSS

body > div {
    margin: 1em 0;
}
textarea {
    width: 100%;
    display: block;
    resize: vertical;
}

JavaScript

"use strict";
function setStyle(cssText) {
	var sheet = document.createElement('style');
	sheet.type = 'text/css';
	/* Optional */ window.customSheet = sheet;
	(document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);
    return (setStyle = function(cssText, node) {
		if(!node || node.parentNode !== sheet)
            return sheet.appendChild(document.createTextNode(cssText));
		node.nodeValue = cssText;
		return node;
	})(cssText);
};

$(document).ready(function() {
    var rule1, rule2,
        output = document.getElementById('output');
    $('.rule1').click(function() {
        rule1 = setStyle(
            '#target{ color:' + $(this).data('color') + '; } \n',
            rule1
        );
    });
    $('.rule2').click(function() {
        rule2 = setStyle(
            '#target{ font-size:' + $(this).data('size') + '; } \n',
            rule2
        );
    });
    $('.del1').click(function() {
        if(rule1) setStyle('', rule1);
    });
    $('.del2').click(function() {
        if(rule2) setStyle('', rule2);
    });
	function log() {
        output.value = window.customSheet ? window.customSheet.innerHTML : "[stylesheet doesn't exist]";
    }
	log();
	$('button').click(log);
});