JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class = "col-md-8 col-md-offset-1" id = "tag-input" />
<button id="tag_button" class="col-md-2">Ekle</button>
<div class="col-md-12" id="tag-container"></div>

<!---- IMPORTANT NOTE: actually fa fa-times is a cross sign coming with font-awesome but in this fiddle it can't be displayed, so you can't remove a tag but main concern is already is animation issue by which animate() call in line 17/js cant be applied. -->

CSS

#tag_button {
    margin-top: .75em;
    height: 2em;
    background: #27AE60;
    color: #fff;
    border: none;
    border-radius: 0;
}
a.tag {
    float: left;
    margin-left: .5em;
    margin-top: .5em;
    padding: .5em;
    background: #2980b9;
    text-decoration: none;
    color: #ffffff;
}

.tag i {
    margin-left: .5em;
    visibility: hidden;
}
.tag:hover > .fa-times {
    visibility: visible;
}
.fa-times {
    visibility: hidden;
}
#tag-container {
    height: auto;
}

JavaScript

function findTagByText(text) {
            var jSpot = $("a:contains(" + text + ")")
                .filter(function () { return this.text === text; });
            return jSpot;
        }


        $(document).ready(function() {
            $("#tag_button").click(function() {
                var tags = $("#tag-input").val().trim().split(",");
                var existing_tags = [];
                $("#tag-container .tag").each(function() {
                    existing_tags.push($(this).text());
                });
                for (raw_tag in tags) {
                    if ($.inArray(tags[raw_tag], existing_tags) != -1) {
                        findTagByText(tags[raw_tag]).animate({ backgroundColor: "#e74c3c" }, 400);
            tags.splice(raw_tag, 1);
        }
        }
        var tag_list = tags;
        for (myTag in tag_list) {
            var tag = "<a class='tag'>" + tag_list[myTag] + "<i class='fa fa-times'><i/></a>";
            $("#tag-container").append(tag);
            $("#tag-input").val("");
        }

        $(".tag i").click(function() {
            $(this).parent().remove();
        });
        });
    });