JSFiddle - React, Tailwind, and code Playground

by Jason Miller

HTML

<script src="https://npmcdn.com/tags-input"></script>
<link rel="stylesheet" href="https://npmcdn.com/tags-input/tags-input.css">
<h1><code>tags-input</code> Example</h1>
<fieldset>
    <label for="name">Name:</label>
    <input type="text" placeholder="Test User" id="name" />
</fieldset>
<fieldset>
    <label for="tags">Tags:</label>
    <input type="tags" placeholder="add..." id="tags" />
</fieldset>
<fieldset>
    <label for="email">Email:</label>
    <input type="email" placeholder="user@example.com" id="email" />
</fieldset>
<p id="out"></p>

CSS

/** demo styling */
body {
    padding: 10px;
    font: 16px/1.21 'Helvetica Neue',helvetica,arial,sans-serif;
}
fieldset {
    padding: 10px;
    border: none;
}
label {
    display: inline-block;
    width: 3.5em;
    text-align: right;
    padding: 0 5px;
}
input {
    display: inline-block;
    padding: 2px;
    margin: 2px 0;
    background: #FFF;
    border: 1px solid #CCC;
    width: 16em;
    font: inherit;
    border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input:focus, .tags-input.focus {
    border-color: #59F;
    outline: none;
}

Babel + JSX

let $ = s => [].slice.call(document.querySelectorAll(s));

// log events as they happen:
let t = $('#tags')[0];
t.addEventListener('input', log);
t.addEventListener('change', log);
function log(e) {
    $('#out')[0].textContent = `${e.type}: ${this.value.replace(/,/g,', ')}`;
}

// hook 'em up:
$('input[type="tags"]').forEach(tagsInput);