JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div class="wrap">
    <input id="input" type="text" placeholder="search">
        <button id="search" type="button">Search</button>
        <div id="tags">
            <button id="clear">Clear</button>
        </div>
 </div>

CSS

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

JavaScript

$('#search').on('click', function(){
    
	var markup = inputTags($('#input').val());
     	
    $('#tags').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) {
        $('#search').click();
    }
});