JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js&quot;"></script>
<div id="container">
  <div class="page">
    <div>
      <h1>piece-y search</h1>
    </div>
    
    <div id="main">
     
      
      <div class="c1">
        <h2>piece search</h2>
        <div id="piece-search">
          
            <ul class="sort-by">
            <li>
          	<input class="search" placeholder="Search pieces" />
         	</li>
            <li class="sort btn" data-sort="type">Sort by type</li>
            <li class="sort btn" data-sort="thickness">Sort by thickness</li>
            <li class="sort btn" data-sort="height">Sort by height</li>
            <li class="sort btn" data-sort="category">Sort by style</li>
          </ul>
          
          <ul class="filter">
          	 <li>
            <select name="material" id="filter-material">
            <option selected="selected" value="material">Select a Material</option>
  			<option value="material">Plastic</option>
  			<option value="material">Glass</option>
			</select> 
            </li>
            <li class="btn" id="filter-none">Show all</li>
            <li class="btn" id="filter-scientific" value="category">Only show scientific glass</li>
            <li class="btn" id="filter-artsy" value="category">Only show artsy glass</li>
          </ul>
          
          <ul class="list">
           	
               	  <li class="item">
                	<p class="sorting-info hide-this">
                    <p class="material">plastic</p>
                    <p class="type">pipe</p>
                    <p class="thickness">3mm</p>
                    <p class="height">15inch+</p>
                    <p class="category">artsy</p>
                     </p>
				</li>
                
                <li class="item">
                	<p class="sorting-info hide-this">
                    <p class="material">glass</p>
                    <p class="type">pipe</p>
                    <p...

CSS

.item{
margin: 0.5em;
padding: 0.5em;
width: 150px;
height: 150px;
float: left;
-webkit-transition: background 0.35s linear;
-moz-transition: background 0.35s linear;
-ms-transition: background 0.35s linear;
-o-transition: background 0.35s linear;
transition: background 0.35s linear;
color: transparent;
box-shadow: 0px 1px 2px #111;
}

.item:hover{
	display:block;
	background:#229B55;
	color:#F4F4F4;
}

JavaScript

var options = {
  valueNames: [ 'material', 'type', 'thickness', 'height', 'category' ]
};

var featureList = new List('piece-search', options);

$('#filter-material').change(function () {
    var selection = this.value; 

    // filter items in the list
    featureList.filter(function (item) {
        if (item.values().material == selection) {
            return true;
        } else {
            return false;
        }
    });

});

$('#filter-scientific').click(function() {
  featureList.filter(function(item) {
    if (item.values().category == "scientific") {
      return true;
    } else {
      return false;
    }
  });
  return false;
});

$('#filter-artsy').click(function() {
  featureList.filter(function(item) {
    if (item.values().category == "artsy") {
      return true;
    } else {
      return false;
    }
  });
  return false;
});

$('#filter-none').click(function() {
  featureList.filter();
  return false;
});