JSFiddle - React, Tailwind, and code Playground

HTML

TAGS INPUT<br><br><br>

<ul class="cont-input">
        <li class="r-input">
            <input type="text" class="inputTags" placeholder="tags con barra espaciadora"><input type="hidden" name="elinput[]">
        </li>
    </ul>

<br><br>

    <ul class="cont-input">
        <li class="r-input">
            <input type="text" class="inputTags" placeholder="tags con barra espaciadora"><input type="hidden" name="elinput[]">
        </li>
    </ul>

CSS

*, *:before, *:after {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



html {
    width: 100%;
    height: 100%;
    -ms-touch-action: none;
}


body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;  
}


ul.cont-input {
    width: 25rem;
    overflow: auto;
    list-style-type: none;
    border: 1px solid rgb(193, 184, 184);
    margin: 0 auto;
}


ul.cont-input > li {
    float: left;
    padding: .2rem .2rem .2rem 0;
}


ul.cont-input > li > span {
    background-color: rgb(180, 212, 234);
    border: 1px solid rgb(15, 216, 186);
    border-radius: 3px;
    display: inline-block;
    padding: .1rem .9rem .1rem .1rem;
    margin: 0 .1rem;
}


ul.cont-input > li > span > i {
    font-size: .9rem;
    position: absolute;
    top: 0;
    right: 3px;
    display: inline;
    font-family: arial, sans-serif;
    line-height: .9rem;
    color: rgb(255, 0, 0);
    cursor: pointer;
}


input.inputTags {
    min-width: 3rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: inherit;
    outline: none;
}

JavaScript

var inputTagging = {

    params : [],
    exp : new RegExp('\\s'), //caracter con el que se creará un nuevo tag 

    escritura: function() {

        Array.prototype.forEach.call(document.querySelectorAll('.inputTags'), function(obj, i) {

            inputTagging.params.push(new Array());

            obj.addEventListener('keyup', function() {

                if (inputTagging.exp.test(this.value)) inputTagging.nuevoTag(this.value, this, i);

            }, false);


            document.querySelectorAll('.cont-input')[i].addEventListener('click', function() {

                obj.focus();

            }, false);
        })

    },


    nuevoTag: function(valTag, control, indice) {

        var tagLimpio = valTag.replace(this.exp, ''),  
        lis = document.createElement('li'),
        sp = document.createElement('span'), 
        cierre = document.createElement('i'), 
        LIcontrol = document.querySelectorAll('.r-input')[indice],
        controlpadre = LIcontrol.parentNode;

        sp.textContent = tagLimpio;
        cierre.textContent = 'x';

        cierre.addEventListener('click', function() {
            var li = this.parentNode.parentNode,
                ul = li.parentNode,
                listaNodos = Array.prototype.slice.call(ul.children),
                indexLi = listaNodos.indexOf(li);
            ul.removeChild(li);
            control.focus();
            inputTagging.params[indice].splice(indexLi, 1);
            control.nextSibling.value = inputTagging.params[indice];
        }, false);

        sp.appendChild(cierre);
        lis.appendChild(sp);

        controlpadre.insertBefore(lis, LIcontrol);
        control.value = '';
        control.focus();

        this.params[indice].push(tagLimpio);
        control.nextSibling.value = this.params[indice];
    }
}


document.addEventListener('DOMContentLoaded', function() {

    inputTagging.escritura();

}, false);