JSFiddle - React, Tailwind, and code Playground

HTML

<style id="myStyle">
    p {
        width: 10px;
        height: 10px;
        background-color: lime;    
    }
    p {
        margin: 10px;
        float: left;
    }
    div.clearfix {
        clear: both;
    }
    #message {
        height: 200px;
        overflow-y: scroll;
        border: 1px solid navy;
        margin: 5px;
        padding: 5px;
        font-size: small;
        font-style: italic;
    }
    button {
        margin-left: 5px;
    }
</style>
<div>
    <p></p>
    <p></p>
    <p></p>
</div>
<div class="clearfix"><button id="grow">Grow</button><button id="shrink">Shrink</button><button id="repaint">Repaint</button></div>
<div id="message"></div>
<button id="clearLog">Clear log</button>

JavaScript

var d = document,
    i = d.getElementById.bind(d),
    t = function(str) { 
        var s = d.createElement('div'); s.innerHTML = str; return s; 
    },
    m       = i('message'), 
    log     = function(str) { m.appendChild(t(str)); },
    clearLog = function() { m.innerHTML = ''; },

    myStyle = i('myStyle'),
    sheet   = myStyle.sheet,
    pRule   = sheet.cssRules[0],
    growBtn = i('grow'),
    shrinkBtn = i('shrink'),
    repaintBtn = i('repaint'),
    clearLogBtn = i('clearLog'),
    scale    = function(factor) {
        pRule.style.width = factor * parseFloat(pRule.style.width) + 'px';
        pRule.style.height = factor * parseFloat(pRule.style.height) + 'px';
    }
log('Starting: ' + pRule.cssText);
growBtn.addEventListener('click', function() {
    scale(2);
    log('Have grown!');
    log('Now: ' + pRule.cssText);
});
shrinkBtn.addEventListener('click', function() {
    scale(0.5);
    log('Have shrinked!');
    log('Now: ' + pRule.cssText);    
});
repaintBtn.addEventListener('click', (function(colorsToUse) {
    var colorsCount = colorsToUse.length,
        chooseRandomColor = function() { return colorsToUse[Math.random(0) * colorsCount | 0] };
    return function() {
        var currentColor = pRule.style.backgroundColor, nextColor;
        while (currentColor === (nextColor = chooseRandomColor()));
        pRule.style.backgroundColor = nextColor;
        log('Have been repainted!');
        log('Now: ' + pRule.cssText); 
    };
})(['magenta', 'red', 'maroon', 'cyan', 'blue', 'navy', 'lime', 'green', 'olive']));

clearLogBtn.addEventListener('click', clearLog);