JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="input-large uneditable-input tokenahead">
    <div class="measurer"></div>
	  <div class="tokens"></div>
    <input type="text" autocomplete="off" placeholder="tags..."/>
</div>

CSS

.tokenahead {
  cursor: text;
  overflow: hidden;
  height: auto;
  padding-bottom: 0;
  border-color:#ccc;
  background-color:white;
}
.focus{
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted 9;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);   
}
.tokenahead a.tag {
  cursor: default;
  float: left;
  display: inline-block;
  border: 1px solid #ccc;
  text-decoration: none;
  padding: 0 4px;
  margin: 0 3px 3px 0;
   -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
 
.tokenahead a:hover {
  color: #08c;
}
 
.tokenahead span.close {
  font-size: 14px;
  line-height: 14px;
  margin-left: 4px;
}
 
.tokenahead .measurer {
  position: absolute;
  top: -1000px;
}
 
.tokenahead input {
  border: none;
  box-shadow: none;
  outline : none;
  float: left;
  margin: 0 0 5px;
  padding: 0;
  width: 100px;
}
.tokenahead input:focus {
  border-color: none;
  outline: 0;
  outline: thin dotted 9;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

JavaScript

!function ($) {
 
  "use strict"; // jshint ;_;
 
 
 /* TOKENAHEAD PUBLIC CLASS DEFINITION
  * ================================== */
 
  var Tokenahead = function (element, options) {
    this.$wrapper = $(element)
    this.$measurer = $('.measurer', this.$wrapper)
    this.$tokens = $('.tokens', this.$wrapper)
    this.$originalInput = $('input', this.$wrapper)
    this.$clonedInput = $('input', this.$wrapper).clone().appendTo(this.$wrapper).attr('id','fake-input').attr('name','fake-input').val('')
    this.$originalInput.hide()
    $.fn.typeahead.Constructor.call(this, this.$clonedInput, options)
  }
 
  Tokenahead.prototype = $.extend({}, $.fn.typeahead.Constructor.prototype, {
 
    constructor: Tokenahead
 
  , updater: function (item) {
      this.addToken(item)
      return ''
    }
 
  , addToken: function (item) {
      var token = $(this.options.token)
        , text = $('<span></span>').text(item).appendTo(token)
      token.appendTo(this.$tokens)
      var tokenValue = $("span", this.$tokens).not(".close").map(function() {
		return $(this).text();
	  }).get();
      this.$originalInput.val(tokenValue)
    }
 
  , listen: function () {
      var that = this
 	  if(that.$element.val() || that.$tokens.children().length!=0){
	  	that.$element.attr("placeholder", "");
	  	that.$element.css("width","30")
	  }
      $.fn.typeahead.Constructor.prototype.listen.call(this)
 
      this.$wrapper
        .on('click', 'a', function (e) {
          e.stopPropagation()
        })
        .on('click', '.close', function (e) {
          $(this).parent().remove()
	      var tokenValue = $("span", that.$tokens).not(".close").map(function() {
			return $(this).text();
		  }).get();
		  that.$originalInput.val(tokenValue)
          that.$element.focus()
        })
        .on('click', function () {
          that.$element.focus()
        })
 
      this.$element
        .on('focus', function (e) {
          that.$wrapper.addClass('focus');
         ...