JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<input type="text" class="filter" />
<div class='output'></div>

CSS

.highlight {
    display:inline-block;
    background:black;
    color:white;
    margin-right:1em;
}

JavaScript

$('input.filter').on('keyup', function () {
    var words = $(this).val().split(" ");

    $('.output').empty();
    for (var i = 0; i < words.length; i++) {
        var span = $("<span>", {
            class: 'highlight',
            text: words[i]
        });
        
        $('.output').append(span);
    }

});