JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="text" id="filter">
    <ul>
        <li>Alpha</li>
        <li>Bravo</li>
        <li>Charlie</li>
        <li>Delta</li>
        <li>Echo</li>
        <li>Foxtrot</li>
        <li>Golf</li>
        <li>Hotel</li>
        <li>India</li>
        <li>Juliet</li>
        <li>Kilo</li>
        <li>Lima</li>
        <li>Mike</li>
        <li>November</li>
        <li>Oscar</li>
        <li>Papa</li>
        <li>Quebec</li>
        <li>Romeo</li>
        <li>Sierra</li>
        <li>Tango</li>
        <li>Uniform</li>
        <li>Victor</li>
        <li>Whiskey</li>
        <li>X-ray</li>
        <li>Yankee</li>
        <li>Zulu</li>
    </ul>
</form>

JavaScript

!function(a){a.fn.filterList=function(){return a.expr[":"].Contains=function(a,b,c){return(a.textContent||a.innerText||"").toUpperCase().indexOf(c[3].toUpperCase())>=0},a(this).keyup(function(){var b=a(this).val();return b?(a(this).next("ul").find("li:not(:Contains("+b+"))").slideUp(),a(this).next("ul").find("li:Contains("+b+")").slideDown()):a(this).next("ul").children("li").slideDown(),!1}),this}}($);

$('#filter').filterList();