JSFiddle - React, Tailwind, and code Playground

HTML

<div id="text"></div>

CSS

#text {
    display: block;
    border: 1px solid #bfbfbf;
    height: 200px;
    width: 300px;
}

#text span {
    background: #bada55;
}

JavaScript

$('#text').prop("contenteditable", true).on('keyup change',function(){
    var $el = $(this);
    $el.find('span').contents().unwrap(); // remove existing spans around "design"
    $el.html(function(i,v){       
       return v.replace(/\bdesign\b/gi, "<span>design</span>") // wrap design with spans
    });
    setEndOfContenteditable(this);    
});

// taken from StackOverFlow Answer http://stackoverflow.com/a/3866442/1385672
function setEndOfContenteditable(contentEditableElement) {
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();//Create a range (a range is a like the selection but invisible)
        range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        selection = window.getSelection();//get the selection object (allows you to change selection)
        selection.removeAllRanges();//remove any selections already made
        selection.addRange(range);//make the range you have just created the visible selection
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
        range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        range.select();//Select the range (make it the visible selection
    }
}