JSFiddle - React, Tailwind, and code Playground

HTML

<select id="cd-dropdown" class="cd-select">
    <option value="-1" selected>Choose an animal</option>
    <option value="1" class="icon-monkey">Monkey</option>
    <option value="2" class="icon-bear">Bear</option>
    <option value="3" class="icon-squirrel">Squirrel</option>
    <option value="4" class="icon-elephant">Elephant</option>
</select>

<div id="div1" class="animalDiv">MONKEY</div>
<div id="div2" class="animalDiv">BEAR</div>
<div id="div3" class="animalDiv">SQUIRREL</div>
<div id="div4" class="animalDiv">ELEPHANT</div>

CSS

.animalDiv {
 display:none;
 outline:1px solid red;
 height:30px;   
}

/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

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

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    background: #f4f4f4 url(../images/grid_DominikKiss_SubtlePatterns.jpg);
    font-weight: 300;
    font-size: 15px;
    color: #333;
    overflow: scroll;
    overflow-x: hidden;
}

a {
    color: #555;
    text-decoration: none;
}

.container {
    width: 100%;
    position: relative;
}

.main,
.container > header {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    padding: 0 10px;
}

.container > header {
    padding: 40px 10px 50px;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 1px rgba(255,255,255,0.8);
    margin-bottom: 30px;
}

.container > header h1 {
    font-size: 34px;
    line-height: 38px;
    margin: 0;
    font-weight: 700;
    color: #333;
    float: left;
}

.container > header h1 span {
    display: block;
    font-size: 20px;
    font-weight: 300;
}

.fleft {
    float: left;
    width: 49%;
    min-width: 300px;
}

.main p {
    color: #AAA;
    padding: 20px 30px 0px 0px;
    font-size: 20px;
    line-height: 34px;
    font-weight: 300;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* Header Style */
.codrops-top {
    line-height: 24px;
    font-size: 11px;
    background: #fff;
    background: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    z-index: 9999;
    position: relative;
    box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}

.codrops-top a {
    padding: 0px 10px;
  ...

JavaScript

/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-csstransitions-touch-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load
 */
;
window.Modernizr = function(a, b, c) {
    function z(a) {
        j.cssText = a
    }
    function A(a, b) {
        return z(m.join(a + ";") + (b || ""))
    }
    function B(a, b) {
        return typeof a === b
    }
    function C(a, b) {
        return !!~ ("" + a).indexOf(b)
    }
    function D(a, b) {
        for (var d in a) {
            var e = a[d];
            if (!C(e, "-") && j[e] !== c) return b == "pfx" ? e : !0
        }
        return !1
    }
    function E(a, b, d) {
        for (var e in a) {
            var f = b[a[e]];
            if (f !== c) return d === !1 ? a[e] : B(f, "function") ? f.bind(d || b) : f
        }
        return !1
    }
    function F(a, b, c) {
        var d = a.charAt(0).toUpperCase() + a.slice(1),
            e = (a + " " + o.join(d + " ") + d).split(" ");
        return B(b, "string") || B(b, "undefined") ? D(e, b) : (e = (a + " " + p.join(d + " ") + d).split(" "), E(e, b, c))
    }
    var d = "2.6.2",
        e = {},
        f = !0,
        g = b.documentElement,
        h = "modernizr",
        i = b.createElement(h),
        j = i.style,
        k, l = {}.toString,
        m = " -webkit- -moz- -o- -ms- ".split(" "),
        n = "Webkit Moz O ms",
        o = n.split(" "),
        p = n.toLowerCase().split(" "),
        q = {},
        r = {},
        s = {},
        t = [],
        u = t.slice,
        v, w = function(a, c, d, e) {
            var f, i, j, k, l = b.createElement("div"),
                m = b.body,
                n = m || b.createElement("body");
            if (parseInt(d, 10)) while (d--) j = b.createElement("div"), j.id = e ? e[d] : h + (d + 1), l.appendChild(j);
            return f = ["&#173;", '<style id="s', h, '">', a, "</style>"].join(""), l.id = h, (m ? l : n).innerHTML += f, n.appendChild(l), m ||...