JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="a">

<li class="fruit,veg,nuts,drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg,nuts,drink">Product 3</li>
<li class="veg,nuts">Product 4</li>

</ul>

<ul class="f">

<li><a href="javascript:;">Fruit</a></li>
<li><a href="javascript:;">Veg</a></li>
<li><a href="javascript:;">Nuts</a></li>
<li><a href="javascript:;">Drink</a></li>

</ul>

CSS

body {
font-family: "Calibri";
}
#inTotal {
	font-weight: bold;
	border-bottom: 2px solid black;
}
.nr {
	font-weight: bold;
}
input {
    border: none;
    background: transparent;
	text-align: center;
}
table, th, td {
    border: 1px solid black;	
    border-collapse: collapse;
}
.Left {
	text-align: left;
	margin-left: 5px;
}

JavaScript

$(function(){
$('.f a').click(function(){
    var text=$(this).text().toLowerCase();
    $('.a li').hide();  
    var li=$('.a li').filter(function(){
      return $(this).attr('class').indexOf(text)>-1;
    });
    li.show();
});

});