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

$('#tag_button').click(function(){
    var value = $('#tag-input').val();
    if(!value) return false;
    if($("#tag-container a").text().indexOf(value) == -1){
    $('#tag-container').append('<i><a class="tag">'+value+'</a></i>');
    }else{
        var div = $("#tag-container a").filter(function() {
    return $(this).text() === value;
});
    div.fadeTo('slow', 0.5).fadeTo('slow', 1.0);
    }
});