JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class="inputholder">
    <input type="text" id="inputtext"/>
</div>

CSS

.tag
{
    margin-right:2px;
    background-color: #DEE7F8;
    border-left: 1px solid #CAD8F3;
    text-align:center;
    padding:5px;
    color: #777777;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin: 0 0 0 6px;
}
a.close{
    text-decoration: none;
    background-color: #DEE7F8;
    position: relative;
    border-right: 1px solid #CAD8F3;
    margin-left: -3px;
    padding: 5px 2px;
    color: #777777;
    cursor: pointer;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
a.close:hover, .tag:hover{
   background-color: #3399CC;
}
input
{
    border:0;
    display:inline-block;
    padding:5px;
}

input:focus
{
    outline-width:0;
}

.inputholder
{
    border:1px solid black;
    padding:5px;
}

JavaScript

$(function(){    
    $("#inputtext").keyup(function(e){
        var keyCode = e.which || e.keyCode;
        
        if(keyCode == 52){/*$ pressed*/
            var valueofinput = $(this).val();
			valueofinput = valueofinput.substring(0, --valueofinput.length);
            $('#inputtext').before('<span class="tag">' + valueofinput + '</span><a href="javascript:void(0)" class="close">x</a>');
            $('input').val('');
        }
    });
    $(".close").live("click",function(){
        $(this).prev("span").remove();
        $(this).remove();
    });
    $(".tag").live("mouseenter", function() {
        $(this).css("background-color","#3399CC");
    	$(this).next("a").css("background-color","#3399CC");
    }).live("mouseleave", function() {
        $(this).css("background-color","#DEE7F8");
    	$(this).next("a").css("background-color","#DEE7F8");
    });
    
    $(".close").live("mouseenter", function() {
        $(this).css("background-color","#3399CC");
    	$(this).prev("span").css("background-color","#3399CC");
    }).live("mouseleave", function() {
        $(this).css("background-color","#DEE7F8");
    	$(this).prev("span").css("background-color","#DEE7F8");
    });
    $('.inputholder').click(function() { $('#inputtext').focus(); });
});