JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="input"  onfocus="this.value = '';" value="Start Searching" style="text-transform:lowercase;" />
		</div>
		<span class="input"></span>
		<hr/>
		<ul class="filter">
            <li data-label="lowercase">lowercase</li>
            <li data-label="UPPERCASE">UPPERCASE</li>
		</ul>

CSS

body{font-family:Arial; font-size:12px; padding:0 20px; margin:0;}
hr{
	border-top:1px dotted #aaa;
	border-bottom:none;
	margin:20px 0;}
input[type=text]#input{
	width:100%;	
	line-height:24px;
	border:none;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	outline:none;
	}
.search{
	background:url('../images/search.png') 5px no-repeat;
	margin-top:20px;
	border:1px solid #eee;	
	padding:5px 5px 5px 45px;
	}
.input{display:block; padding-top:20px;}
ul.filter{list-style:none;}
.filter{margin:0; padding:0;}
.filter li{display:block; background:#f2f2f2; padding:5px; margin:0 5px 5px 0; float:left;}

JavaScript

$.noConflict();
			jQuery(document).ready(function($) {
				$('#input').on( "keyup", function() {
					// get the value from text field
					var input = $(this).val().toLowerCase();
					// check wheather the matching element exists
						// by default every list element will be shown
						$("ul li").hide();
						// Non related element will be hidden after input
                    $.each($("ul li"), function(i, v) {
                        var el = $(v);
                        if (el.html().toLowerCase().indexOf(input) !== -1) {
                            el.show();
                        }
                    });
					
					// For Search Variable, total number of lists and number of matched elements
					var total = $("ul li").length;
					var matched = $("ul li[data-label*="+ input +"]").length;
					if(input.length > 0){
						$('.input').show();
						$('.input').html('Searched for "' + input + '" (' + matched + ' Matched out of ' + total + ' )');
					} else {
						$('.input').hide();}
				});
			});