JSFiddle - React, Tailwind, and code Playground

HTML

<div class="folder black size100 borderYellow">FOLDER</div>
<div class="radio-toolbar">
    <input type="radio" id="radio1" name="color" value="black" checked>
    <label for="radio1">black</label>
    <input type="radio" id="radio2" name="color" value="white">
    <label for="radio2">white</label>
    <input type="radio" id="radio3" name="color" value="green">
    <label for="radio3">green</label>
</div>
<div class="radio-toolbar">
    <input type="radio" id="radio4" name="size" value="size100" checked>
    <label for="radio4">size 10</label>
    <input type="radio" id="radio5" name="size" value="size200">
    <label for="radio5">size 20</label>
    <input type="radio" id="radio6" name="size" value="size300">
    <label for="radio6">size 30</label>
</div>
<div class="radio-toolbar">
    <input type="radio" id="radio7" name="bordercolor" value="borderYellow" checked>
    <label for="radio7">border yellow</label>
    <input type="radio" id="radio8" name="bordercolor" value="borderBlue">
    <label for="radio8">border blue</label>
    <input type="radio" id="radio9" name="bordercolor" value="borderOrange">
    <label for="radio9">border orange</label>
</div>

CSS

.radio-toolbar input[type="radio"] {
    display:none;
}
.radio-toolbar label {
    display:block;
    width: 100%;
    float: left;
    background-color:#ddd;
    padding:4px 11px;
    font-size:16px;
    margin-bottom: 5px;
    cursor: pointer;
}
.radio-toolbar input[type="radio"]:checked + label {
    background-color:#bbb;
}
.folder.black {
    background-color:#000;
}
.folder.white {
    background-color:#fff;
}
.folder.green {
    background-color:#00CC00;
}
.folder.size100 {
    width: 100px;
}
.folder.size200 {
    width: 200px;
}
.folder.size300 {
    width: 300px;
}
.folder.borderYellow {
    border-color: #FFFF33;
}
.folder.borderBlue {
    border-color: #3333FF;
}
.folder.borderOrange {
    border-color: #FF9933;
}
.folder.size200 {
    width: 200px;
}
.folder.size300 {
    width: 300px;
}

.folder {border: 3px #DDD solid;}

JavaScript

document.addEventListener('DOMContentLoaded', function () {

    var radios = {
        color: [].slice.call(document.getElementsByName('color')),
        bordercolor: [].slice.call(document.getElementsByName('bordercolor')),
        size: [].slice.call(document.getElementsByName('size'))
    };
    var radioButtons = [].concat.call([], radios.color, radios.size, radios.bordercolor);
    var paragraph = document.querySelector('.folder');
    
    for (var i = 0; i < radioButtons.length; i++) {
        var elem = radioButtons[i];
        elem.addEventListener('change', function (e) {
            unsetGroup(this.name);
            paragraph.classList.add(this.value);
        }, false);
    }
    
    function unsetGroup(name) {
        radios[name].forEach(function(el) {
            paragraph.classList.remove(el.value);
        });
    }
});