JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top-content">
    <input class="search clearable" type="search" id="input"/>
</div>
<span class="input"> </span>

<hr/>
<div class="gallery">
    <ul class="filter" id="gallery">
        <li>Robot, tank, arduino</li>
        <li>example, other, hello</li>
        <li>bye, gg, something</li>
    </ul>
</div>

CSS

/* -------------------- *
 * Search tool
 * -------------------- */
 ul.filter {
    list-style:none;
}

JavaScript

/*
 * search function
 */

$.noConflict();
jQuery(document).ready(function ($) {
    $('.filter li').each(function () {
        $(this).attr('data-label', $(this).text().toLowerCase());
    });
    $('#input').on("keyup", function () {
        // get the value from text field
        var input = $(this).val().toLowerCase();
        console.log(input);
        // check wheather the matching element exists
        // by default every list element will be shown
        $("ul.filter li").hide();
        // Non related element will be hidden after input
        $("ul.filter li[data-label*=" + input + "]").show();

        // For Search Variable, total number of lists and number of matched elements
        var total = $("ul.filter li").length;
        var matched = $("ul.filter li[data-label*=" + input + "]").length;
        if (input.length > 0) {
            $('.input').show();
            $('.input').html('Searched for "' + input + '" (' + matched + ' Matched out of ' + total + ' )');
        } else {
            $('.input').hide();
        }
    }).on('focus',function(){
        this.value='';
        $(this).keyup();
    }).on('click',function(){
        if(this.value === "" )
            $(this).keyup();
    });
});