JSFiddle - React, Tailwind, and code Playground

HTML

Troy's Text Property Demo:<br>
<div class="container">
    <p class="box a">A class 'a' paragraph.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis ipsum iaculis, gravida velit vitae, congue nunc.</p>
    <p class="box b">A class 'b' paragraph. Sed at leo vel nulla aliquet sodales quis quis turpis. Mauris consectetur ligula nec nisl bibendum congue.</p>
    <p class="box c">A class 'c' paragraph. Nam sagittis non tellus quis fermentum. Mauris aliquet, neque vitae aliquet dignissim, dolor arcu tempus tortor, vel convallis felis elit sit amet lectus.</p>
    <p><span class="box a">A </span><span class="box b">mix </span><span class="box c">of </span><em class="box a">inline </em><span class="box b">elements, </span><span class="box c">including </span><span class="box a">span, </span><em class="box b">em, </em><span class="box c">and </span><strong class="box a">strong, </strong><span class="box b">with </span><span class="box c">all </span><span class="box a">three </span><span class="box b">classes. </span><strong class="box c">Nunc </strong><span class="box a">in </span><span class="box b">pulvinar </span><em class="box c">arcu, </em><span class="box a">viverra tincidunt </span><strong class="box b">erat.</strong><span class="box c"> Quisque sed</span><span class="box a"> est </span><span class="box b">eget </span><span class="box c">neque </span><span class="box a">aliquet</span><span class="box b"> ultricies. </span></p>
    <p class="box a b c">ThisIsAGiantLongStringMeantToDemonstrateWordWrapThisParagraphIsClassABandC</p>
    <p class="box a b c">Tab&#9;Tab&#9;Tab&#9;Tab</p>
    <div class="test box a b c" >Text overflow example.<br> White-space: nowrap;<br> Overflow: hidden;<br> blah blah blah blah blah blah blah blah<br> blahblahblahblahblahblahblahblahblahblahblahblah
    </div>
        <p><span class="box a b c">This paragraph shows off the difference that font-style makes. Set Font-Family to "Libre Baskerville" and then compare the...

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono);
@import url(http://fonts.googleapis.com/css?family=Diplomata);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300);
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic);

@font-face
{
font-family: sansation;
src: url(http://www.w3schools.com/cssref/sansation_light.woff);
}

input {
    width: 50px;
}

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

.controls {
    width: 49%;
}

.box {

}
.a {

}
.b {

}
.c {

}

.resetall {
    float:right;
}

div.test /* totally stole this from w3schools.com */
{
white-space:nowrap;
width:200px; 
height: 6em;
overflow: hidden; 
border:1px solid #000000;
}

JavaScript

// by Troy Whorten Feb 26, 2014
// forked by Troy Whorten Mar 13, 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 =...