JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
		<input type="text" id="search" />
		<ul id="items">
			<li>Hello</li>
			<li>World</li>
			<li>Apple</li>
			<li>Bat</li>
			<li>Cat</li>
			<li>Dog</li>
		</ul>
	</div>

CSS

.highlight {
	color: #f00;
}

JavaScript

$("#search").on( "keyup", function() {
		
		$("#items li span").contents().unwrap();

		$("#items li").each(function(){
			var search = $("#search").val();
			var item = $(this);

			var text = item.text();
			
			var regex = new RegExp(search, 'g');
			text = text.replace(regex, "<span class='highlight'>"+search+"</span>");
			item.html(text);
		});
	});