JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<from id="form" action="">
<span id="emailInput">
    <input type="text" name="email-tags"/>
</span>
    <span id="test"></span>
</form>

CSS

input{
    border: none;
    outline:none;
    -webkit-transform:none;
}
#emailInput{
    border: 1px solid #ccc;
    height: 30px;
    line-height:30px;
    display:inline-block;
}
.emailAddress{
    border-radius:2px;
    background:lightblue;
    color: blue;
    padding: 5px 2px;
    margin: 3px;
}
.close{
    cursor:pointer;
    font-size: 0.75em;
    padding:5px;
    color:#666;
}

JavaScript

function isValidEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
} 
$(function(){
    $('input').keydown(function(event){
        $input = $(this);
        $emailInput = $("#emailInput");
        $("#test").html(event.which);
        switch(event.which){
            //stop for "," ";" and " "
            case 188:
            case 186:
            case 32:
               currentEmail = $.trim($input.val());
               if(isValidEmail(currentEmail)){    
                   $address = $("<span>");
                   $address.addClass("emailAddress");
                   $address.text(currentEmail);
                   $close=$('<span>');
                   $close.addClass("close").text("x");
                   $address.append($close);
                   $input.val("");
                   $input.before($address); 
               }
        }
    });
    
    $("#emailInput").on("click",".close",function(){
        $(this).parent().remove();
    });
});