JSFiddle - React, Tailwind, and code Playground

HTML

Create tags:
<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....
tags = [];
$("#textBox").keypress(function (e) {
    if (e.which === 13) {
        $(".target").append("<a href='#' class='tag' >"  + this.value+'<span class="cross">X</span>'+ "</a>");
        

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

$('body').on('click','.cross',function(){

    tags.splice($(this).parent('a').html(), 1);
    $(this).parent('a').remove();
});