JSFiddle - React, Tailwind, and code Playground

by Igaojsfiddle

HTML

<ul id="lista" class="inputosaurus-container" style="width:350px;">

    <li id="AQUI" class="inputosaurus-input inputosaurus-required"><div style='float:left;'><input type="text" style="width: 25px;" id="texto"></div></li>



</ul>
        <br/>    
    <input type="button" id="foco" value="focus()"/>

CSS

.inputosaurus-container {
	background-color:#ffffff;
	border:1px solid #bcbec0;
	margin:0 5px 0 0;
	padding:0 3px;
	display : inline-block;
	cursor:text;
	font-size : 14px;
	font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding:5px;
    float:left;
}
.inputosaurus-container li {
	display : inline-block;
	margin : 2px 2px 0;
	padding : 2px 3px;
	white-space : nowrap;
	overflow : hidden;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
	-ms-text-overflow:ellipsis;
	background-color:#e5eff7;
	border:#bdd6eb solid 1px;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	-o-border-radius:2px;
	border-radius:2px;
	color:#5b9bcd;
	line-height : 20px;
}
.inputosaurus-container li.inputosaurus-selected { background-color:#bdd6eb; }
.inputosaurus-container li a {
	font-size:16px;
	color:#5b9bcd;
	padding : 1px;
	text-decoration : none;
	outline : none;
    float:left;
}
.inputosaurus-container .inputosaurus-input {
	border:none;
	background-color:#ffffff;
	margin-top : 3px;
}
.inputosaurus-container .inputosaurus-input input {
	border:none;
	height : 23px;
	font-size : 14px;
	line-height : 20px;
	color : #555;
	margin : 0;
	outline : none;
	padding : 0 0 1px 1px;
	width : 25px;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}
.inputosaurus-container .inputosaurus-input input:hover {
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}
.inputosaurus-input-hidden { display:none; }

JavaScript

//alert($("*:focus").attr("id"));
/*$('#lista').on('click', 'li.inputosaurus-selected', function() {
     $(this).remove();
});*/



$('#lista').on('click', 'a', function() {
     $(this).parent().remove();
     $("#texto").focus();
});
$(document).ready(function (){
    $("#lista").click(function(){
        $("#texto").focus();
    });
    
    $('#texto').focus(function() {
        $('#lista li.inputosaurus-selected').removeClass('inputosaurus-selected');          
    });
    
    $("#texto").focus();
    /*$("#lista li").click(function (){
        alert($(this).find('a:first').attr('id'));
    });*/
    
    $('#texto').keypress(function(e) {
    code = e.keyCode ? e.keyCode : e.which;
    if(code.toString() == 13) {
        if($("#texto").val() == '')
    {
        $("#texto").focus();   
    }
    else
    {
       var randomnumber=Math.floor(Math.random()*11)
    $("#AQUI").before("<li id='elii"+randomnumber+"'><span style='float:left;'>"+$("#texto").val()+"</span><a style='float:left;' id='lk"+randomnumber+"' href='#' class='ficon'>✖</a></li>");
    //$("#lista li").eq(2).find('span').after("");
    $("#texto").css("width","25px");
    $("#texto").val('');
    $("#texto").focus();   
    }   
    }
});
    

    
       $(this).on('keydown',function(e){
           
           if(e.which == 37)
           {
               if($("*:focus").attr("id") != 'texto')
               {
                   $("#lista li").eq($('#lista li.inputosaurus-selected').index()-1).addClass('inputosaurus-selected');
                  $("li.inputosaurus-selected", 0).last().removeClass('inputosaurus-selected');
                   
               };
           }
           
           
           if(!e) {e = event;}
           if($("*:focus").attr("id") == 'texto')
           {
               var wd =  $("#texto").width() + 8;
               $("#texto").css("width",wd);
           }

              if(e.which == 8)
              {
                  if($("#texto").val() != '')
    ...