JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

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

CSS

span.badge[contenteditable] {
    display: inline-block;
}
span.badge[contenteditable]:empty::before {
    content: 'Make a new tag';
    display: inline-block;
}
span.badge[contenteditable]:empty:focus::before {
    content: 'Start typing';
}