JSFiddle - React, Tailwind, and code Playground

HTML

<span class="badge"><span contenteditable="true" id="new-tag" class="badge alert-info">Make a new tag ..</span><i class="fa fa-lg fa-plus-circle"></i></span>

CSS

#new-tag {
   min-width: 150px;
   display: block;
    min-height: 20px;
}

JavaScript

$('#new-tag').focus(function () {
    if ($(this).data('editing') !== 'active') {
        $(this).text('Start typing ..');
    }
});
$('#new-tag').keydown(function (e) {
    console.log(e);
    if ($(this).data('editing') !== 'active') {
        $(this).text(String.fromCharCode(e.charCode));
    }
    $(this).data('editing', 'active');
});
$('#new-tag').change(function () {
    if ($(this).data('editing') == 'active' && $(this).text() == '') {
        $(this).text('Make a new tag ..');
        $(this).removeData('editing');
    }
});