JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test" style="width:200px;height:200px;background:#000;color:#fff;">Test</div>

CSS

.testclass {
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
}

JavaScript

Element.prototype.setAttributes = function(attr) {
    var recursiveSet = function(at, set) {
        for (var prop in at) {
            /* check if object and not a dom node or array */
            alert(prop);
            if (typeof at[prop] == 'object' && at[prop].dataset == null && at[prop][0] == null) {
                //recursiveSet(at[prop], set[prop]);
            } else if (at[prop] === 'html') {
           
                //this.innerHTML = set[prop];
            } else {
                //set[prop] = at[prop];
            }
        }
    }
    recursiveSet(attr, this);
}
var test = document.getElementById("test");

/* test use */
test.setAttributes({    
    'styles': {
        'background': 'lightGreen',
        'color': 'blue',
        'width': '100px'
    },
    'html':'hellop'    
});