JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div class="searcher">
    <input id="search" type="text" placeholder="search">
        <button type="button"></button>
        <div id="tags" class="tags-wrap">
            
        </div>
 </div>

CSS

.tags-wrap {
    background-color:#567;
    padding:10px;
}
.tags-wrap > span {
    background-color:#F20;
    color:#fff;
    padding:5px;
    margin-right:5px;
}

JavaScript

$('button').on('click', function(){
    
	var markup = inputTags($('#search').val());
     	
    $('.tags-wrap').append(markup);
  	$('input').val('');
    
});

function inputTags(input) {
    
	var res = input.split(" ");
	var output = "";
    
    for (i = 0; i < res.length; i++) {
        output = output + "<span>" + res[i] + "</span>";
    }
    
	return output;
}

$('input').on('keyup', function(e) {
    if (e.keyCode === 13) {
        $('button').click();
    }
});