JSFiddle - React, Tailwind, and code Playground
HTML
<div class="col-sm-4 btn-group hidden-sm hidden-xs">
<button type="button" class="btn btn-sm filter" data-filter="all">
Todos
</button>
<button type="button" class="btn btn-sm filter" data-filter=".category-2">
Trilho
</button>
<button type="button" class="btn btn-sm" data-filter=".category-1">
Varão
</button>
</div>
<div class="col-sm-2 hidden-sm hidden-xs" id="slider-thumbs">
<!-- thumb navigation carousel items -->
<ul class="list-inline mCustomScrollbar" data-mcs-theme="dark-3" id="Grid">
<li class="hvr-pulse-grow mix category-1" data-cat="1"> <a id="carousel-selector-0" class="selected">
<img src="modal/cortinas/1.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow mix category-1" data-cat="1"> <a id="carousel-selector-1">
<img src="modal/cortinas/2.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow mix category-1" data-cat="1"> <a id="carousel-selector-2">
<img src="modal/cortinas/3.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow mix category-1" data-cat="1"> <a id="carousel-selector-3">
<img src="modal/cortinas/4.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow mix category-1" data-cat="1"> <a id="carousel-selector-4">
<img src="modal/cortinas/5.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow mix category-2" data-cat="2"> <a id="carousel-selector-5">
<img src="modal/cortinas/6.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow mix category-2" data-cat="2"> <a id="carousel-selector-6">
...
CSS
#Grid .mix{
display:none;
}
JavaScript
$(function(){
$('#Grid').mixitup();
});