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'), isIE = false;
    sheet.type = 'text/css';
    /* Optional */ window.customSheet = sheet;
    (document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);
    try{sheet.cloneNode(false).appendChild(document.createTextNode(''));}
    catch(err){isIE = true;}
    var wrapper = isIE ? document.createElement('div') : sheet;
    return (setStyle = function(cssText, node) {
        if(!node || node.parentNode !== wrapper)
            node = wrapper.appendChild(document.createTextNode(cssText));
        else node.nodeValue = cssText;
        if (isIE) sheet.styleSheet.cssText = wrapper.innerHTML;
        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);
});