JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/filterizr/1.3.4/jquery.filterizr.min.js"></script>
<!-- DEMO 1-->
<ul class="demo1-filter">
	<li>
		<a href="#" class="demo1-control" data-filter="1">FILTER 1</a>
	</li>
	<li>
		<a href="#" class="demo1-control" data-filter="2">FILTER 2</a>
		</li>
</ul>

<ul class="demo2-filter">
	<li>
		<a href="#" class="demo2-control" data-filter="1">FILTER 1</a>
	</li>
	<li>
		<a href="#" class="demo2-control" data-filter="2">FILTER 2</a>
	</li>
</ul>


<div class="demo1">
	<div class="filtr-item" data-category="1">
		Hello
	</div>
	<div class="filtr-item" data-category="1">
		Hi
	</div>
	<div class="filtr-item" data-category="2">
		How Are You
	</div>
	<div class="filtr-item" data-category="2">
		I'm fine
	</div>
</div>

<!-- DEMO2-->
<div class="demo2">
	<div class="filtr-item" data-category="1">
		Hello
	</div>
	<div class="filtr-item" data-category="1">
		Hi
	</div>
	<div class="filtr-item" data-category="2">
		How Are You
	</div>
	<div class="filtr-item" data-category="2">
		I'm fine
	</div>
</div>

SCSS

.demo1{
	background:tomato;
	margin:10px;
	.filtr-item{
		width:25%
	}
}

.demo2{
	background:skyblue;
	margin:10px;
	.filtr-item{
		width:25%
	}
}

JavaScript

var demo1 = $('.demo1').filterizr({
   controlsSelector: '.demo1-control'
});

var demo2 = $('.demo2').filterizr({
   controlsSelector: '.demo2-control' 
});