JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="myInput" onkeyup="search()" placeholder="Search for a class..." title="Type something">
    <p class="results">Results</p>
    <p id="totalClasess"></p>
    <ul id="myUl">
      <li><a href="#" class="header">Section 1</a></li>
      <li><a href="#">Class 1 </a></li>
      <li><a href="#">Class 2</a></li>
      <li><a href="#">Class 3</a></li>
    </ul>

JavaScript

ul     = document.getElementById('myUl');
        li     = ul.getElementsByTagName('li');
        aa = ul.getElementsByTagName('a');
        document.getElementById('totalClasess').innerHTML = (aa.length) + " Results";

				function search()
					{
						var input, filter, ul, li, a, aa;
						input  = document.getElementById('myInput');
						filter = input.value.toUpperCase();
						ul     = document.getElementById('myUl');
						li     = ul.getElementsByTagName('li'); 

						for(var i=0; i<li.length; i++)
						{
							a = li[i].getElementsByTagName('a')[0];
							if(a.innerHTML.toUpperCase().indexOf(filter) > -1)
							{ 

								li[i].style.display = '';
							}
							else
							{
								li[i].style.display = 'none';
							}
						}
					}