JSFiddle - React, Tailwind, and code Playground

HTML

<select id="auswahl" autocomplete="off">
    <option value="all">Alle anzeigen</option>
    <option value="a">Kategorie A</option>
    <option value="b">Kategorie B</option>
    <option value="c">Kategorie C</option>
    <option value="d">Kategorie D</option>
</select>
<div id="test"></div>
<li class="a"></li>
<li class="a"></li>
<li class="b"></li>
<li class="b"></li>
<li class="c"></li>
<li class="c"></li>
<li class="d"></li>
<li class="d"></li>

CSS

body {
    margin:10px;
    background:#333;
}
select {
    border:none;
    background:#eee;
    font-family:century gothic;
    font-size:15px;
    padding:4px;
    height:30px;
    font-weight:bold;
}
option {
    font-size:15px;
    padding:5px;
}
li {
    width:500px;
    height:100px;
    background:#eee;
    display:block;
    margin-top:10px;
    border-radius:5px;
    box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 10px;
}
.a {
    background:#ff3333;
}
.b {
    background:#99ff33;
}
.c {
    background:cyan;
}
.d {
    background:orange;
}

JavaScript

l = document.getElementsByTagName("li")
aw = document.getElementById("auswahl");
aw.addEventListener("change", test)

l[0].style.height="150px";

function test() {
if (aw.value == "all") {
for (i = 0; i < l.length; ++i) {
l[i].style.display = "block";
l[i].style.height = "100px";
}
l[0].style.height = "150px";
} else {
s = document.getElementsByClassName(aw.value)
for (i = 0; i < l.length; ++i)
l[i].style.display = "none";
for (i = 0; i < s.length; ++i) {
s[i].style.display = "block";
s[i].style.height = "100px";
}
s[0].style.height = "150px";
}
}

for (i = 0; i < l.length; ++i) {
l[i].addEventListener("click", function(){scale(this)}, false);
} 
function scale(o) {
for (i = 0; i < l.length; ++i)
l[i].style.height = "100px";
o.style.height = "150px";
}