JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://sliptree.github.io/bootstrap-tokenfield/bootstrap-tokenfield/bootstrap-tokenfield.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://sliptree.github.io/bootstrap-tokenfield/bootstrap-tokenfield/bootstrap-tokenfield.js"></script>
<div class="input-group">
    <input id="email-notifications" type="text" class="form-control" placeholder="Username" style="width:300px" />
</div>

JavaScript

$('#email-notifications')

.on('beforeCreateToken', function (e) {
    var token = e.token.value.split('|');
    e.token.value = token[1] || token[0];
    e.token.label = token[1] ? token[0] + ' (' + token[1] + ')' : token[0];
})
    .on('afterCreateToken', function (e) {
    // Über-simplistic e-mail validation
    var re = /\S+@\S+\.\S+/;
    var valid = re.test(e.token.value);
    if (!valid) {
        $(e.relatedTarget).addClass('invalid');
        // need to do a bit more error state showing here
    }
})
    .on('beforeEditToken', function (e) {
    if (e.token.label !== e.token.value) {
        var label = e.token.label.split(' (');
        e.token.value = label[0] + '|' + e.token.value;
    }
})
    .on('removeToken', function (e) {
    alert('Token removed! Token value was: ' + e.token.value);
})
    .on('preventDuplicateToken', function (e) {
    alert('Duplicate detected! Token value is: ' + e.token.value);
})
    .tokenfield()