JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
        <label for="input">1. Paste in text</label>
        <textarea id="input"></textarea>
        <div class="group">
            <div id="result">
                <p>2. Words output</p>
                <div></div>
            </div><!-- /results -->
        </div>
    </div><!--!/#container -->

CSS

#container {
        width: 85%;
        margin: 20px auto;
}
#input {
        width: 96%;
        height: 200px;
}

#result {
        width: 65%;
        margin-right: 5%;
        
}
#input, #result div {
        border: 1px solid #ddd;
        margin: 10px 0;
        padding: 2%;
}
#result div {
        min-height: 40px;
}

JavaScript

$(document).ready(function() {
    //comment...easy
    $('textarea').bind('blur keyup',function() {
        //comment
        $('#result div').text($('textarea').val());
        $('#result div')
            .html('[span]'+$('#result div')
                .html().replace(/( |, |\. )/g,'[/span]$1[span]').replace(/@/g,'[/span]$1[span]').replace(/\n/g,'[/span]<br /><br />[span]')+'[/span]')
    });/* /.bind */
});