JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<ul class="oz_labels clearfix">
    <li>
        <label>
            <input type="text" />
        </label>
    </li>
</ul>

CSS

.oz_labels {
    border: 1px #dddddd solid;
    border-radius: 3px;
    padding: 3px;
}

.oz_labels li {
    margin-right: 5px;
    background: #f5f5f5;
    list-style: none;
    float: left;
}

.oz_labels li em {
    cursor: pointer;
}

.oz_labels li em:hover {
    color: red;
}

.oz_labels li:last-child {
}

.oz_labels li:last-child label {
    display: block;
    width: 100%;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

JavaScript

$(function() {
    'use strict';
    
    $('.oz_labels li:last-child input').on('keydown', function(e) {
        var keyCode = e.keyCode || e.which;
            if(keyCode === 13) {
                var li = $('<li/>');
                
                li.append('<span>'+$(this).val()+'</span> <em>x</em>');
                
                $('.oz_labels li:last-child').before(li);
                $(this).val('');
            }  
    });

                                
 });