JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div class="searcher">
    <input id="search" type="text">
        <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);
  
});

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