JSFiddle - React, Tailwind, and code Playground

by rolfsf

HTML

<div class="unit">
    <label for="role-picker">Role: </label>
    <div class="picker nicepicker">
        <select id="role-picker">
                <option>Industry</option>
                <option>Practice</option>
                <option selected="selected">Geography</option>
        </select>
    </div>
</div>
<div class="unit">
    <div class="set" id="geography">
        <label for="region-picker">Region: </label>
        <div class="picker nicepicker">
            <select id="region-picker">
                    <option selected="selected">All Regions</option>
                    <option>Midwest</option>
                    <option>Northeast</option>
                    <option>Northwest</option>
                    <option>South</option>
                    <option>West</option>
            </select>
        </div>
    </div>
    <div class="set" id="practice" style="display:none;">
        <label for="practice-picker">Practice: </label>
        <div class="picker nicepicker">
            <select id="practice-picker">
                    <option selected="selected">All Product Lines</option>
                    <option>Product Line A</option>
                    <option>Product Line B</option>
                    <option>Product Line C</option>
                    <option>Product Line D</option>
                    <option>Product Line E</option>
            </select>
        </div>
    </div>
    <div class="set" id="industry" style="display:none;">
        <label for="industry-picker">Industry: </label>
        <div class="picker nicepicker">
            <select id="industry-picker">
                    <option selected="selected">All Industries</option>
                    <option>Industry 1</option>
                    <option>Industry 2</option>
                    <option>Industry 3</option>
                    <option>Industry 4</option>
                    <option>Industry 5</option>
            </select>
        </div>
    </div>
</div>
<div...

SCSS

$riskmatch-orange: #F15727;
label {
    display: inline-block;
    width: 12rem;
    text-align: left;
    padding-left: 1.2rem;
    color: #999;
    font-size: .8em;
    font-family: "Open Sans";
    font-weight: 300;
}
.picker {
    position: relative;
    width: auto;
    display: inline-block;
    margin: 0 0 2px 1.2%;
    /* overflow: hidden; */
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 5em;
    font-family: "Open Sans";
    font-weight: 600;
    height: auto;
}
.picker:first-child {
    margin-left: 0;
}
.picker:after {
    content: "\25BE";
    /* font-family: entypo; */
    z-index: 0;
    position: absolute;
    right: 8%;
    top: 50%;
    margin-top: -12px;
    color: #FFF;
}

.nicepicker {
    background: $riskmatch-orange;
    margin-bottom: .7em;
    width: 12rem;
}

.nicepicker:before {
        content: "";
        position: absolute;
        border: 0.625em solid transparent;
        border-top-color: $riskmatch-orange;
        left: 50%;
        top: 1.4rem;
        margin-left: -0.625em;
}
.nicepicker:after {
       
}
.picker select {
    position: relative;
    display: block;
    min-width: 100%;
    width: 135%;
    height: auto;
    padding: 2px 45px 2px 15px;
    color: #555;
    border: none;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    z-index: 99;
    cursor: pointer;
    font-size: 12px;
    font-size: .75rem; 
    text-align: center;
    text-transform: uppercase;
}

.nicepicker select {
    color: #FFF;
}

body {
    padding: 2em;
}

.unit {
    display: inline-block;
    width: 12rem;
}
.set {display: inline-block;}
p {margin: 4rem 0;}

JavaScript

$('#role-picker').on("change", function(){
    var selectedRole = $('#role-picker option:selected').text().toLowerCase();
    $('#geography, #practice, #industry').hide();
    $('#' + selectedRole).fadeIn();  
});