JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://raw.github.com/aehlke/tag-it/master/js/tag-it.js"></script>
<link rel="stylesheet" href="https://raw.github.com/aehlke/tag-it/master/css/jquery.tagit.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<form>
    <label>Name*:</label>
    <input type="text" name="caption" class="cleanable"/>

    <label>Description:</label>
    <textarea rows="2" cols="36" name="description" class="cleanable"></textarea>
     
    <label>Tags:</label>
    <div>
        <ul id="video-tags" class="tags-input">
        </ul>
        <ul id="tags-autocompletion" style="display: none;">
            <li>hockey</li>
            <li>football</li>
            <li>baseball</li>
            <li>basketball</li>
        </ul>
        <!-- Hidden text input in which tag names are copied -->
        <input id="video-tags-input" 
            name="tags" type="text" style="display: none;" 
            class="cleanable"></input>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

CSS

ul.tagit {
  margin-left: 0;
  display: inline-block;
}

ul.tagit li {
    display: inline-block;
}

ul.tagit li .text-icon {
    display: none;
}

ul.tagit li .tagit-close {
    display: inline-block;
}

JavaScript

$(".tags-input").tagit({
    singleField: true,
    singleFieldNode: $("#video-tags-input"),
    availableTags:
    //array of <li> elements text content 
    $("#tags-autocompletion li").map(function() {
         return $(this).text();
    }).get()
});