JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true"></div>

CSS

div {
    width: 300px;
    height: 200px;
    border: 1px solid gray;
}

.tag {
    display: inline-block;
    border: 1px solid gray;
    padding: 2px 4px;
}

JavaScript

$('div').keyup( function(event) {
    if( event.which == 32 ) {
        $(this).prepend( $('<span class="tag">'+ $(this).text() +'</span>'));
    }
});