JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tags">
  <span>php</span>
  <span>html</span>
  <input type="text" value="" placeholder="Add a tag" />
  <div class="autocomplete"></div>
</div>

CSS

#tags {
  float: right;
  border: 1px solid #ccc;
  padding: 5px;
  font-family: Arial;
}

#tags > span {
  cursor: pointer;
  display: block;
  float: right;
  color: #3e6d8e;
  background: #E1ECF4;
  padding: 5px;
  padding-right: 25px;
  margin: 4px;
}

#tags > span:hover {
  opacity: 0.7;
}

#tags > span:after {
  position: absolute;
  content: "×";
  border: 1px solid;
  padding: 2px 5px;
  margin-left: 3px;
  font-size: 11px;
}

#tags > input {
  direction: rtl;
  background: #eee;
  border: 0;
  margin: 4px;
  padding: 7px;
  width: auto;
}

.autocomplete {
  display: none;
}

JavaScript

$(function() {

  counter = 0;

  $("#tags input").on({
    focusout: function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
      if (txt) $("<span/>", {
        text: txt.toLowerCase(),
        insertBefore: this
      });
      this.value = "";
      $("#tags span").css('background-color', '#E1ECF4');
      counter = 0;
    },
    keyup: function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if (/(188|13|32)/.test(ev.which)) {
        $(this).focusout();
      } else if (/(8)/.test(ev.which) && this.value == '') {
        counter = counter + 1;
        if (counter == 1) {
          $(this).prev("span").css('background-color', 'Red');
        } else {
          $(this).prev("span").remove();
          counter = 0;
        }
      }
    }
  });
  $('#tags').on('click', 'span', function() {
    $(this).remove();
      $("#tags span").css('background-color', '#E1ECF4');
      counter = 0;
  });

});