JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
<div class="filtro bg_branco full">
	<span class="left">Filtrar cursos por:</span>
	<!-- Cidade -->
	<div class="cidade left">
		<label class="left">Cidade</label>
		<select id="cidade" class="option-set clearfix"  data-filter-group="cidade">
		    <option value="*" data-filter-value="" class="selected">Qualquer Cidade</option>
		    <option value="#filter-cidade-cidade1" data-filter-value=".cidade1">Cidade 1</option>
		    <option value="#filter-cidade-cidade2" data-filter-value=".cidade2">Cidade 2</option>
		    <option value="#filter-cidade-cidade3" data-filter-value=".cidade3">Cidade 3</option>
		    <option value="#filter-cidade-cidade4" data-filter-value=".cidade4">Cidade 4</option>
		    <option value="#filter-cidade-icdade5" data-filter-value=".icdade5">Cidade 5</option>
		    <option value="#filter-cidade-cidade6" data-filter-value=".cidade6">Cidade 6</option>
		    <option value="#filter-cidade-cidade7" data-filter-value=".cidade7">Cidade 7</option>
		    <option value="#filter-cidade-cidade8" data-filter-value=".cidade8">Cidade 8</option>
		    <option value="#filter-cidade-cidade9" data-filter-value=".cidade9">Cidade 9</option>
		    <option value="#filter-cidade-cidade10" data-filter-value=".cidade10">Cidade 10</option>
            <option value="#filter-cidade-cidade11" data-filter-value=".cidade11">Cidade 11</option>
		</select>
	</div>
	<!-- Instituição -->
	<div class="escola left">
		<label class="left">Instituição</label>
		<select id="escola" class="filter option-set clearfix"  data-filter-group="escola">
		    <option value="*" data-filter-value="" class="selected">Todas instituições</option>
		    <option value="#filter-escola-escola1" data-filter-value=".escola1">Escola 1</option>
		    <option value="#filter-escola-escola2" data-filter-value=".escola2">Escola 2</option>
		    <option value="#filter-escola-escola3" data-filter-value=".escola3">Escola 3</option>
		   ...

CSS

*{margin:0;padding:0;outline:0;list-style:none;font-family:arial;}
a, a:hover{text-decoration:none;color:red;}
.curso{width:33.333333333333336%;position:relative;}
/* Filtro */
.filtro{line-height:30px;padding:10px;font-size:16px;background:rgba(0,0,0,0.2);}
.cidade label, .escola label{margin:0 2px;}
.cidade.left, .escola.left{margin:0 2px;}
.full{width:100%;float:left;}
.left{float:left;}
/* cursowrapper */
#cursowrapper{padding:15px;}

li ~ li.sem-resultados {
    display: none;
}

JavaScript

$(function(){
	var $container = $('.isotope'),
		  $message = $('.message-div'),
	  filters = {};

	$container.isotope({
	itemSelector : '.produkt-element'
	});
    
	// filter buttons
	$('select').change(function(){
    	var $this = $(this);
    
    	// store filter value in object
    	// i.e. filters.color = 'red'
    	var group = $this.attr('data-filter-group');
    
    	filters[ group ] = $this.find(':selected').attr('data-filter-value');
    	// console.log( $this.find(':selected') )
    	// convert object into array
    	var isoFilters = [];
    	for ( var prop in filters ) {
			isoFilters.push( filters[ prop ] )
    	}
    	console.log(filters);
    	var selector = isoFilters.join('');
    	$container.isotope({ filter: selector });
    	return false;
  	});
      
	$('ul>li').click(function() {
        var $this = $(this);
        var group = $this.parent().data('filter-group');
        filters[ group ] = $this.data('filter-value'); 
        var isoFilters = [];
            for ( var prop in filters ) {
    	        isoFilters.push( filters[ prop ] )
            }
            console.log(filters);
            var selector = isoFilters.join('');
            $container.isotope({ filter: selector });
            return false;
    });
});