JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rolfvohs.com/javascript/columnizer-setup.js"></script>
<script src="http://rolfvohs.com/javascript/columnizer.js"></script>
<script src="http://rolfvohs.com/javascript/isotope.js"></script>
<script src="http://tympanus.net/Development/SimpleDropDownEffects/js/modernizr.custom.63321.js"></script>
<script src="http://tympanus.net/Development/SimpleDropDownEffects/js/jquery.dropdown.js"></script>
      <!-- The buttons that are used to filter out figures. If you click on horror then all figures associated with that name will show and the others will be hidden -->

<div class="filter-buttons">
          
				  <select id="cd-dropdown" class="cd-select">
                       <option value="-1" selected>Pick a Genre</option>
                        <option value="1" data-filter="*">All</option>
                        <option value="2" data-filter=".epic">Epic</option>
                        <option value="3" data-filter=".classic">Classic</option>
                        <option value="4" data-filter=".popular">Popular</option>
                        <option value="5" data-filter=".horror">Horror</option>
					</select>               

</div>    

      <!-- The figures mentioned earlier -->

  <div class="music">
    
    <div id="filter-container" class="cf">
      <div id="sm2-container"></div>  
      
      <!-- Item 1 -->
      
      <figure class="epic">
        <figcaption>
          <div class="demo-title">Galactic Battle</div>
          <ul class="flat"><li><a href="demos/Galactic_Battle.mp3">Listen</a></li></ul>
        </figcaption>
        </figure>
      
      <!-- Item 2 -->
      
      <figure class="horror">
        <figcaption>
          <div class="demo-title">Haunted Forest</div>
          <ul class="flat"><li><a href="demos/Haunted_Forest.mp3">Listen</a></li></ul>
        </figcaption>
        </figure>
      
      <!-- Item 3 -->
      
      <figure class="epic">
        <figcaption>
          <div...

CSS

/*            Select Menu           */

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}


.cd-dropdown,
.cd-select {
width: 300px;
z-index: 0;
position: relative;
display: block;
margin: 0px auto 100px 60%;
}

.cd-dropdown > span {
	width: 100%;
	height: 60px;
	line-height: 60px;
	color: #B4B4B4;
	background: #fff;
	display: block;
	font-size: 90%;
	padding: 0 50px 0 30px;
	position: relative;
	cursor: pointer;
	font-family:modernthin;
}

.cd-dropdown > span:after {
	content: '\25BC';
	position: absolute;
	right: 0;
	top: 15%;
	width: 20%;
	text-align: center;
	font-size: 70%;
	padding: 4%;
	height: 70%;
	line-height: 120%;
	border-left: 1px solid #ddd;
}

.cd-dropdown.cd-active > span:after {
	content: '\25B2';
}

.cd-dropdown ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
}

.cd-dropdown ul li {
	display: block;
}

.cd-dropdown ul li span {
	width: 100%;
	background: #fff;
	line-height: 60px;
	padding: 0 30px 0 75px;
	display: block;
	color: #bcbcbc;
	cursor: pointer;
	font-weight: 700;
}

.cd-dropdown > span,
.cd-dropdown ul li span {
	-webkit-backface-visibility: hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.cd-dropdown > span span[class^="icon-"],
.cd-dropdown > span span[class*=" icon-"]{
	padding: 0 30px 0 45px;
}

/* Select fallback styling */
.cd-select {
	border: 1px solid #ddd;
}

@import url('icons.css');

.cd-dropdown > span,
.cd-dropdown ul li:nth-last-child(-n+3) span {
	box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.cd-dropdown ul {
	margin: -20% 0px 0px;
	width: 100%;
}

.cd-dropdown ul li {
	position: absolute;
	width: 100%;
}

.cd-active.cd-dropdown > span {
	color: #fc756f;
}

.cd-active.cd-dropdown > span,
.cd-active.cd-dropdown ul li span {
	box-shadow: 0 1px 1px...

JavaScript

$( function() {
				
				$( '#cd-dropdown' ).dropdown( {
					gutter : 5
				} );

			});