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>

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');
    }
});