JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/uikit.almost-flat.min.css">
<h1>Token Widget</h1>

<div class="uk-form uk-form-horizontal">

  <div class="uk-form-row">
    <label for="token-number" class="uk-form-label">numbers</label>
    <div class="uk-form-controls">
      <input type="token" value="one, two, three" tabindex="0" data-token-delimiter=", ">
    </div>
  </div>

  <div class="uk-form-row">
    <label for="token-number" class="uk-form-label">letters</label>
    <div class="uk-form-controls">
      <input type="token" value="a,b,c" tabindex="1" data-token-delimiter=",">
    </div>
  </div>

</div>

CSS

.token-input {
  border: 1px solid #ddd;
  padding-left: 6px;
}

.token-input input[type="text"] {
  border: none;
}

.token-input input[type="text"]:focus {
  background: transparent;
}

.token {
  position: relative;
}

.token input[type="text"] {
  position: absolute;
  opacity: 0;
  transition: none;
  font-size: 10px;
}

.token input:focus {
  opacity: 1;
  position: relative;
}

.token input+span {
  position: relative;
  white-space: nowrap;
}

.token input:focus+span {
  opacity: 0;
  position: absolute;
}

JavaScript

var DEFAULT_DELIMITER = ', ';

  var keyIdentifier = {
    ',': "U+002C"
  };

  var keyCode = {
    ',': 188
  };

  var defaultTokenTemplate = document.createElement('template');
  defaultTokenTemplate.innerHTML = '\n<label class="token">\n  <input type="text" value="" autocorrect="off">\n  <span class="uk-badge">\n    <span class="value"></span>\n    <i class="uk-icon-remove" data-remove=".token"></i>\n  </span>\n</label>';

  var defaultTokenInputTemplate = document.createElement('template');
  defaultTokenInputTemplate.innerHTML = '\n<div class="token-input">\n  <input type="text" class="new-token" autocorrect="off"\n</div>';

  function TokenInput(input) {
    // Allow calling using new TokenInput(element), or TokenInput(element).
    if (!(this instanceof TokenInput)) {
      return new TokenInput(input);
    }

    // FULL_DELIMITER will be used for re-joining tokens into string.
    // DELIMITER will be used for splitting. We do this so that slightly
    // mal-formed values (ie "foo,bar") still tokenises into ["foo", "bar"],
    // even if the delimiter token in ", ".
    var FULL_DELIMITER = input.dataset.tokenDelimiter || DEFAULT_DELIMITER;
    var DELIMITER = FULL_DELIMITER.replace(/ /g, '');

    // Strip whitespace (and token delimiter) from the token.
    var strip = function strip(value) {
      return value.replace(new RegExp('(^ *)|(' + DELIMITER + '? *$)', 'g'), '');
    };

    // We need the token template.
    var tokenTemplate = document.querySelector('template#token') || defaultTokenTemplate;

    // Create a new Token instance.
    // This assumes that the token template contains a single <input> element,
    // and a single <element class="value"></element> that will contain the
    // label text.
    function Token(value) {
      tokenTemplate.content.querySelector('input').value = value;
      tokenTemplate.content.querySelector('.value').innerHTML = value;
      return document.importNode(tokenTemplate.content, true);
    }

    var...