JSFiddle - React, Tailwind, and code Playground

HTML

TextBox 1 :
<input type="textbox" id="textBox"></input>
<br/>
<div class="target" contenteditable="false"></div>

CSS

body {
    font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif;
}
.tag {
    color: #3E6D8E;
    background-color: #E0EAF1;
    border-bottom: 1px solid #b3cee1;
    border-right: 1px solid #b3cee1;
    padding: 3px 4px 3px 4px;
    margin: 2px 2px 2px 0;
    text-decoration: none;
    font-size: 90%;
    line-height: 2.4;
    white-space: nowrap;
}
.tag:hover {
    background-color: #c4dae9;
    border-bottom: 1px solid #c4dae9;
    border-right: 1px solid #c4dae9;
    text-decoration: none;
}
.cross {
    background-color:#cd5c5c;
    border-radius: 30px;
    padding: 2px;
}
.cross:hover {
    background-color:red;
}

JavaScript

//enter something in textbox and press enter....
var tags = [];

function remove_tag(x) {
    $(x).parent('a').remove();
}
$(function () {
    $("#textBox").keypress(function (e) {
        if (e.which === 13) {
            $(".target").append("<a href='#' class='tag' >" + this.value + '<span class="cross" onclick="remove_tag(this)">X</span>' + "</a>");

            tags.push(this.value);
            this.value = "";
        }
    });
});