JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/lagodiuk/earley-parser-js/master/earley-oop.min.js"></script>
<div class="wrapper">
    
<div class="txtarea">
<textarea name="Grammar" cols="40" rows="13" id="grm" class="txtarea">
S -> NP VP
VP -> VP PP | V NP | V
PP -> P NP
NP -> Det N | N | Pn | Det A N | A NP
A -> Adv A | A A
Adv -> too | very | quite
Pn -> she | he
A -> fresh | tasty | silver
N -> fish | fork | apple
V -> eats 
Det -> a | an | the
P -> with</textarea>
</div>
    
<div class="examples">
<a href="#" class="example">she eats</a> <br/>
<a href="#" class="example">she eats an apple</a> <br/>
<a href="#" class="example">she eats fresh tasty apple</a> <br/>
<a href="#" class="example">she eats a quite tasty apple</a> <br/>
<a href="#" class="example">she eats a fish</a> <br/>
<a href="#" class="example">she eats a fish with a fork</a> <br/>
<a href="#" class="example">she eats a fish with a silver fork</a> <br/>
<a href="#" class="example">she eats a quite fresh fish with a silver fork</a> <br/>
</div>
    
</div>

<div class="parsing">
<input type="text" size="50" id="txt"/>
<div id="dv"></div>
</div>

CSS

/*
 Transforming nested lists to pretty tree
 
 <div class="tree">
    <ul>
        <li>
            <ul>
            ...
            </ul>
        </li>
        ...
    </ul>
 </div>
 
Source: http://thecodeplayer.com/walkthrough/css3-family-tree
Some other advices about displaying trees: http://stackoverflow.com/questions/1695115/how-do-i-draw-the-lines-of-a-family-tree-using-html-css
*/

* {
    margin: 0;
    padding: 0;
}

.displayTree{
    margin: 10px
}

.tree ul {
	padding-top: 20px;
    position: relative;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
    white-space: nowrap;
	float: left;
    text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
	content: '';
	position: absolute;
    top: 0;
    right: 50%;
	border-top: 1px solid #ccc;
	width: 50%;
    height: 20px;
}
.tree li::after{
	right: auto;
    left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without
 any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{
    padding-top: 0;
}

/*Remove left connector from first child and
 right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
	content: '';
	position: absolute;
   ...

JavaScript

$('.example').click(function(){     
    $('#txt').val($(this).text());
    $('#txt').trigger('input');
    return false;
});

function displayTree(tree) {
    if (!tree.subtrees || tree.subtrees.length == 0) {
        return '<li><a href="#">' + tree.root + '</a></li>';
    }
    var builder = [];
    builder.push('<li><a href="#">');
    builder.push(tree.root);
    builder.push('</a>')
    builder.push('<ul>')
    for (var i in tree.subtrees) {
        builder.push(displayTree(tree.subtrees[i]))
    }
    builder.push('</ul>')
    builder.push('</li>')
    return builder.join('');
}

$('#txt').bind('input', function() {
    var s = $(this).val();

    var tokenStream = s.trim().split(' ');

    var rules = $('#grm').val().trim().split('\n')

    var grammar = new tinynlp.Grammar(rules);

    var rootProduction = 'S';
    var chart = tinynlp.parse(tokenStream, grammar, rootProduction);

    var state = chart.getFinishedRoot(rootProduction);
    if (state) {
        var trees = state.traverse();
        $('#dv').empty();
        for (var i in trees) {
            console.log(JSON.stringify(trees[i]))
            $('#dv').append('<div class="tree" id="displayTree"><ul>' + displayTree(trees[i]) + '</ul></div></br>');
        }
    }
});