JSFiddle - React, Tailwind, and code Playground

HTML

<div class="filter">
    <a class="dropDownSelect" href="#"> -- select -- </a>
    <ul class="dropDownList">
        <li><span class="filter0">All</span></li>
        <li><span class="filter1">Filter 1</span></li>
        <li><span class="filter2">Filter 2</span></li>
        <li><span class="filter3">Filter 3</span></li>
        <li><span class="filter4">Filter 4</span></li>
    </ul>
    
</div>    
<div class="tab-menu">
</div>

<div class="content">
    <div class="filter1">1</div>
    <div class="filter2">2</div>
    <div class="filter3">3</div>
    <div class="filter4">4</div>
    <div class="filter1">1</div>
    <div class="filter2">2</div>
    <div class="filter3">3</div>
    <div class="filter4">4</div>
</div>

CSS

/*! Reset
---------------------------------------------*/
* { margin: 0px; padding: 0px; border: none; outline: none; text-decoration: none; list-style: none;}

/*! General
---------------------------------------------*/
body { background: #eeeeee;}
.cnt { width: 960px;}
.clr { display: block; width: 100%; clear: both; height: 0px;}
.fleft { float: left;}
.fright { float: right;}

.filter { padding: 20px 20px 20px 100px; height: 55px; border-bottom: 1px solid #fff; box-shadow: 0px 0px 2px #ddd;}

.dropDownSelect { border: 1px solid #ccc; display: block; width: 150px; height: 19px; font-size: 15px; padding: 2px; text-align: center; color: #444; background-color: #fff; background-image: url(http://dl.dropbox.com/u/17683975/dropdown.png); background-repeat: no-repeat; background-position: 133px 3px; }
.dropDownOpen { border-bottom: 0px !important;}

.dropDownList { position: relative; z-index: 100; display: none; height: auto; line-height: 19px; font-size: 15px; padding: 2px; width: 150px; background: #fff; border: 1px solid #ccc; border-top: 0px; margin: -1px 0px 0px 0px;}
.dropDownList li { text-align: center; }
.dropDownList li:hover { background: #f3f3f3; cursor: pointer; }



.content { padding: 20px 20px 20px 100px; width: 600px;}
.content div { width: 178px; margin: 10px; display: inline-block; float: left; height: 125px; font-size: 30px; text-align: center; line-height: 125px; border: 1px solid #ccc; background: #fff; box-shadow: 0px 0px 5px #ddd;}

JavaScript

/*!  OnLoad 
---------------------------------------------*/
$(document).ready(function() {

    $('.dropDownSelect').click(function(event) {
        $(this).next().slideToggle(100);
    });

    $('.dropDownList li').click(function(event) {
        $(this).parent().slideUp(100);
        $('.dropDownSelect').empty();
        $(this).children().clone().appendTo('.dropDownSelect');

        // ShowSelectedClass
        var CheckWhichClassSelected = $('.dropDownSelect').children().attr('class');
        alert(CheckWhichClassSelected);

        $('.content div').show();
        if (CheckWhichClassSelected === 'filter0') {
            return false;
        }
        else {
            $('.content div').not('.' + CheckWhichClassSelected).hide();
        }


    });


});