JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="filter-list accordion">
<!-- start old filters-->
	<li class="list-selector filter-by" id="filter-by-desktop">
		<span class="opener" href="#">Filter By</span>
	</li>
	<li class="list-selector sort-by filter-order" id="sort-by-desktop">
		<a class="opener" href="#">Sort By</a>
	</li>
</ul>


<form class="filter-box" method="get">

		<div id="filter-by-id" style="display: block;">
			<div class="mobile-filter-selector" id="filter-by">
				<li class="list-selector filter-by">
					<a class="opener" href="#">Filter By</a>
				</li>
			</div>
			<div class="filter-sections" style="display: flex;">
				<div class="filter-section">
					<h4 class="filter-title">Categories</h4>
					<ul class="hidden-mobile-filter filter-list-box scrollable">
												<li class="Bangle"><a class="filter-list-item" href="http://sandbox.myramani.com/gcwp2/product-category/jewelry/bangle?">Bangle</a></li>
												<li class="Bracelet"><a class="filter-list-item" href="http://sandbox.myramani.com/gcwp2/product-category/jewelry/bracelet?">Bracelet</a></li>
												<li class="Brooch"><a class="filter-list-item" href="http://sandbox.myramani.com/gcwp2/product-category/jewelry/brooch?">Brooch</a></li>
												<li class="Charm"><a class="filter-list-item" href="http://sandbox.myramani.com/gcwp2/product-category/jewelry/charm?">Charm</a></li>
												<li class="Cuff"><a class="filter-list-item" href="http://sandbox.myramani.com/gcwp2/product-category/jewelry/cuff?">Cuff</a></li>
												<li class="Earrings"><a class="filter-list-item" href="http://sandbox.myramani.com/gcwp2/product-category/jewelry/earrings-bridal?">Earrings</a></li>
												<li class="Necklace"><a...

CSS

/* STYLE FIXES */

body.term-jewelry .intro-images .img.img-lg{
	background-image:url("http://sandbox.myramani.com/gcwp2/wp-content/uploads/2017/11/1431529024398-700x253.jpg")
}

#filter-subcategories button.btn{
	display:none !important;
}

html body #filter-subcategories h4{
	font-family:"Cormorant Garamond", "Times New Roman", "Times", "Baskerville", "Georgia", serif;
	padding-left:40px;
}

.filter-list-box button.btn-success{
	background-color:#728f9f;
    border-color: #546b77;
	margin-right: 38px;
    margin-top: 60px;
}

.filter-search input{
	font-size:14px;
}

.filter-list-box{
	clear:both;
}

.filter-list-box i{
	/*display:none;*/
}

html body .filter-box .clear-btn {
    margin-left: auto;
    margin-right: 20px;
    margin-top: 65px;
    text-align: center;
    border: 1px solid #ddd;
    padding: 10px 0px;
    width: 130px;
}

/*
.filter-section .Bronze .jcf-checkbox{
	background-color:#917744;
}

.filter-section .Clay .jcf-checkbox{
	background-color:#e2c993;
}

.filter-section .Crystal .jcf-checkbox{
	background-color:#edf5f7;
}

.filter-section .Fabric .jcf-checkbox{
	background-color:#f4eed7;
}

.filter-section .Glass .jcf-checkbox{
	background-color:#eee;
}

.filter-section .Gold .jcf-checkbox{
	background-color:#ffef42;
}

.filter-section .Rose.Gold .jcf-checkbox{
	background-color:#ffd2c9;
}

.filter-section .Yellow.Gold .jcf-checkbox{
	background-color:#c4b15a;
}

.filter-section .White.Gold .jcf-checkbox{
	background-color:#fff;
}

.filter-section .White.Gold .jcf-checkbox{
	background-color:#514b3e;
}

.filter-section .Polymer.Clay .jcf-checkbox{
	background-color:#72c6e0;
}

.filter-section .Porcelain .jcf-checkbox{
	background-color:#f5e9d7;
}

.filter-section .Porcelain .jcf-checkbox{
	background-color:#f5e9d7;
}

.filter-section .Resin .jcf-checkbox{
	background-color:#c7e4ed;
}

.filter-section .Rhodium .jcf-checkbox{
	background-color:#b8b7bd;
}

.filter-section .Rhodium .jcf-checkbox{
	background-color:#b8b7bd;
}

.filter-section...

JavaScript

jQuery(document).ready(function($){
	//open/close lateral filter
	$('.cd-filter-trigger').on('click', function(){
		triggerFilter(true);
	});
	$('.cd-filter .cd-close').on('click', function(){
		triggerFilter(false);
	});

	function triggerFilter($bool) {
		var elementsToTrigger = $([$('.cd-filter-trigger'), $('.cd-filter'), $('.cd-tab-filter'), $('.cd-gallery')]);
		elementsToTrigger.each(function(){
			$(this).toggleClass('filter-is-visible', $bool);
		});
	}

	//mobile version - detect click event on filters tab
	var filter_tab_placeholder = $('.cd-tab-filter .placeholder a'),
		filter_tab_placeholder_default_value = 'Select',
		filter_tab_placeholder_text = filter_tab_placeholder.text();
	
	$('.cd-tab-filter li').on('click', function(event){
		//detect which tab filter item was selected
		var selected_filter = $(event.target).data('type');
			
		//check if user has clicked the placeholder item
		if( $(event.target).is(filter_tab_placeholder) ) {
			(filter_tab_placeholder_default_value == filter_tab_placeholder.text()) ? filter_tab_placeholder.text(filter_tab_placeholder_text) : filter_tab_placeholder.text(filter_tab_placeholder_default_value) ;
			$('.cd-tab-filter').toggleClass('is-open');

		//check if user has clicked a filter already selected 
		} else if( filter_tab_placeholder.data('type') == selected_filter ) {
			filter_tab_placeholder.text($(event.target).text());
			$('.cd-tab-filter').removeClass('is-open');	

		} else {
			//close the dropdown and change placeholder text/data-type value
			$('.cd-tab-filter').removeClass('is-open');
			filter_tab_placeholder.text($(event.target).text()).data('type', selected_filter);
			filter_tab_placeholder_text = $(event.target).text();
			
			//add class selected to the selected filter item
			$('.cd-tab-filter .selected').removeClass('selected');
			$(event.target).addClass('selected');
		}
	});
	
	//close filter dropdown inside lateral .cd-filter 
	$('.cd-filter-block h4').on('click',...