JSFiddle - React, Tailwind, and code Playground

HTML

<label>Tags</label>
<div id="tags" class="tagstype" contentEditable="true" OnKeyDown="process_it(this,event);" autocorrect="off" spellcheck="off">
</div>

<input type="hidden" name="tags" id="tagval" />

CSS

div{
    padding:5px;
    border:1px solid #000;
    color:#555;
    min-height:20px;
}
.tag{
    background:#aac;
    color:#fff;
    font-weight:bolder;    
    border:1px solid #8888aa;
    padding:2px;
    display:inline-block;
    cursor:pointer;
}
.tag a{
    text-decoration:none;
    color:#222;
    font-size:11px;
    border-radius:50%;
    cursor:pointer;
}
.tag a:hover{
    background:#f00;
    color:#fff;
    
}

JavaScript

function process_it(x,e){
var e= e||window.event;
var code = e.keyCode || e.which;
if(code == 13 && e.shiftKey) {
 var tx = $('#tags').html();
    $('#tags').html("");
var i=0;
var res = tx.split(",");
for(i=0;i<res.length;i++)   
{
var z=res[i];
if (z.toString().length>0) {
$("#tags").html(""+$('#tags').html()+"<div class='tag' ContentEditable='false'><span class='val'>"+z.toString()+"</span>&nbsp;&nbsp;<a href='#!' onclick='closeMe(this);'>X</a>&nbsp;</div>&nbsp;");
}
}
}
     $("#tag").blur();
    $("#tag").focus();
}

$("#tag").focus(function(){
  this.selectionStart = this.selectionEnd = this.value.length;
});

function closeMe(x){    
    $(x).closest(".tag").hide("100");
    $(x).closest("tag").remove();
     $("#tag").blur();
    $("#tag").focus();
 }