JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" class="main"contenteditable="true"><span contenteditable="false">&nbsp;item&nbsp;</span><span contenteditable="false">&nbsp;item&nbsp;</span><span contenteditable="false">&nbsp;item&nbsp;</span><span contenteditable="false">&nbsp;item&nbsp;</span></div>

CSS

div.main {
    width: 400px;
    height: 250px;
    border: solid 1px black;
}

div.main span {
    width:40px;
    background-color: red;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}

i.wrapper {
    font-style: normal;
}
}

JavaScript

$('#main').on('input', function() {
    $(this).contents().each(function(){
        if (this.nodeType != 3 
            && !$(this).next('i.wrapper').length 
            && this.nodeName != "I") {
            $("<i class='wrapper'/>").insertAfter(this);
        }
    });
}).trigger('input');