JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="box a">A
        <br>class
        <br>box</div>
    <div class="box b">B
        <br>class
        <br>box</div>
    <div class="box a">A
        <br>class
        <br>box</div>
    <div class="box c">C
        <br>class
        <br>box</div>
    <div class="box a">A
        <br>class
        <br>box</div>
</div>
<div class="controls">Class to apply styling:
    <select id="classSelect">
        <option value=".box">Box (all)</option>
        <option value=".a">A</option>
        <option value=".b">B</option>
        <option value=".c">C</option>
    </select>
    <button class="resetall" onclick="clearAll()">Reset All</button>
    <br>Set Float:
    <select onChange="changeStyle(this, 'float')">
        <option default value="">Reset</option>
        <option value="right">Right</option>
        <option value="left">Left</option>
        <option value="none">None</option>
    </select>
    <br>Set Clear:
    <select onChange="changeStyle(this, 'clear')">
        <option default value="">Reset</option>
        <option value="right">Right</option>
        <option value="left">Left</option>
        <option value="none">None</option>
        <option value="both">Both</option>
    </select>
    <br>Set Display:
    <select onChange="changeStyle(this, 'display')">
        <option default value="">Reset</option>
        <option value="none">None</option>
        <option value="block">Block</option>
        <option value="inline">Inline</option>
        <option value="inline-block">Inline-block</option>
        <option value="table">Table</option>
    </select>
    <br>Set Vertical-align:
    <select onChange="changeStyle(this, 'verticalAlign')">
        <option default value="">Reset</option>
        <option value="top">Top</option>
        <option value="middle">Middle</option>
        <option value="bottom">Bottom</option>
    </select>
    <br>Set Transition:
    <select onChange="changeStyle(this, 'transition')">
       ...

CSS

.container, .controls {
    border-style:dotted;
    border-width:1px;
    width: 420px;
    height: 420px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    overflow: scroll;
}

.controls {
    width: 300px;
}

.box {
    width: 80px;
    height: 80px;
    color: white;
    text-align: center;
    overflow: hidden;
}
.a {
    background-color: blue;
}
.b {
    background-color: red;
}
.c {
    background-color: green;
}

.resetall {
    float:right;
}

JavaScript

// by Troy Whorten Feb 26, 2014
function changeBoxShadow(clear, text) {
    //get the class to apply the style change to
    var styleClassSel = document.getElementById("classSelect");
    var styleClass = styleClassSel[styleClassSel.selectedIndex].value;
    var ssting="";
    //get all the boxes of the selected class
    var boxes = document.querySelectorAll(styleClass);
    
    if(!text)
    {
        sx = "bsx";
        sy = "bsy";
        sb = "bsblur";
        sc = "bscolor";
        prop = "boxShadow";
    }
    else
    {
        sx = "tsx";
        sy = "tsy";
        sb = "tblur";
        sc = "tcolor";
        prop = "textShadow";
    }       
    
    //get values
    var xoff = document.getElementById(sx).value;     
    var yoff = document.getElementById(sy).value;
    var blur = document.getElementById(sb).value;
    var color = document.getElementById(sc).options[document.getElementById(sc).selectedIndex].value;
    
    if(!clear && color == "")
        color = "black";
    
    if(!clear)
        sstring = xoff + "px " + yoff + "px " + blur + "px " + color;
    else
        sstring = "";
    
    for (var i = 0; i < boxes.length; i++) {
        string = "boxes[i].style."+ prop +" ='" + sstring + "'";
        document.getElementById("currentString").innerHTML = string;
        eval(string);
    }
}


function changeStyle(el, prop, unit, trans) {
    //get the class to apply the style change to
    var styleClassSel = document.getElementById("classSelect");
    var styleClass = styleClassSel[styleClassSel.selectedIndex].value;
    var style;
    var string;

    //get the value of the style that changed
    if (el.tagName == "SELECT") style = el[el.selectedIndex].value;
    else style = el.value;

    //if style is undefined, make it blank
    if (!style) style = "";

    //if unit is undefined, make it blank
    if (!unit) unit = "";

    //get all the boxes of the selected class
    var boxes = document.querySelectorAll(styleClass);

   ...