JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://fonts.googleapis.com/css?family=Droid+Sans+Mono"></script>
<div id="container">

            <div id="result">
                Choose a WPM to start.
            </div>

            <select id="selector">
              <option value="300">300wpm</option>
              <option value="400">400wpm</option>
              <option value="500">500wpm</option>
              <option value="600">600wpm</option>
              <option value="700">700wpm</option>
              <option value="800">800wpm</option>
              <option value="900">900wpm</option>
              <option value="1000">1000wpm</option>
            </select> 

            <h1>A Nice Cup of Tea</h1>
            <h2>George Orwell, 12 January 1946</h2>

            <div id="spritz_me">
If you look up 'tea' in the first cookery book that comes to hand you will probably find that it is unmentioned; or at most you will find a few lines of sketchy instructions which give no ruling on several of the most important points. This is curious, not only because tea is one of the main stays of civilization in this country, as well as in Eire, Australia and New Zealand, but because the best manner of making it is the subject of violent disputes. When I look through my own recipe for the perfect cup of tea, I find no fewer than eleven outstanding points. On perhaps two of them there would be pretty general agreement, but at least four others are acutely controversial. Here are my own eleven rules, every one of which I regard as golden: First of all, one should use Indian or Ceylonese tea. China tea has virtues which are not to be despised nowadays — it is economical, and one can drink it without milk — but there is not much stimulation in it. One does not feel wiser, braver or more optimistic after drinking it. Anyone who has used that comforting phrase 'a nice cup of tea' invariably means Indian tea....

CSS

#container{
                width: 50%;
                margin-left: 25%;
                margin-right: 25%;
            }

            #result{
                text-align: center;
                font-size: 36px;
                font-family: 'Droid Sans Mono', sans-serif;
                padding-top: 36px;
                padding-bottom: 36px;
                min-height: 100px;
            }

            .start{
                color: #333333;
            }
            .pivot{
                color: #ff0000;
            }
            .end{
                color: #333333;
            }

JavaScript

$( document ).ready(function() {

            $('#selector').on('change', function (e) {

                clearTimeouts();
                var optionSelected = $("option:selected", this);
                var valueSelected = this.value;
                var input = $('#spritz_me').text();
                var rez = spritzify(input, '#result', valueSelected);

            });
        });

function spritzify(input, output, wpm){
    var words_per_minute = wpm;
    var ms_per_word = 60000/wpm;

    var all_words = input.split(' ');

    var word = '';
    var result = '';

    for (var i=0; i<all_words.length; i++){

        setTimeout(function(x) { 
            return function() { 
                var p = pivot(all_words[x]);
                if(p == '' || p == '\n' || p == ' '){
                    return;
                }
                $(output).html(p);
        }; }(i), ms_per_word * i);
        
        // $(output).html(result);
    }
}

function clearTimeouts(){
    var id = window.setTimeout(function() {}, 0);

    while (id--) {
        window.clearTimeout(id);
    }
}

function pivot(word){
    var length = word.length;

    var bit = -1;
    while(word.length < 22){
        if(bit > 0){
            word = word + '.';
        }
        else{
            word = '.' + word;
        }
        bit = bit * -1;
    }

    var start = '';
    var end = '';
    if((length % 2) === 0){
        start = word.slice(0, word.length/2);
        end = word.slice(word.length/2, word.length);
    } else{
        start = word.slice(0, word.length/2);
        end = word.slice(word.length/2, word.length);
    }

    var result;
    result = "<span class='start'>" + start.slice(0, start.length -1);
    result = result + "</span><span class='pivot'>";
    result = result + start.slice(start.length-1, start.length);
    result = result + "</span><span class='end'>";
    result = result + end;
    result = result + "</span>";

    return result;
}