JSFiddle - React, Tailwind, and code Playground

by Todd Levy

HTML

<div class="filter filter_buttonbar gender_filter">
    <a href="#" data-id="B" class="gender_both active">Both</a>
    <a href="#" data-id="F" class="gender_female">Female</a>
    <a href="#" data-id="M" class="gender_male">Male</a>
    <!-- ONLY APPEARS ON DOCTOR SEARCH -->
    <input type="hidden" name="gender" id="gender_value" value="B" />
</div>

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-font-feature-settings:"liga=0";
}
/********************
 * 
 *    FILTER
 * 
*********************/
 .filter_buttonbar {
    width: 100%;
    overflow:hidden;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    border-radius: 0.25em;
    border: solid 1px #d5d5d5;
}
.filter_buttonbar a {
    font-size: 0.8125em;
    font-weight: 700;
    font-family:'Lato', sans-serif;
    background: #f3f3f3;
    display: block;
    float: left;
    border-top: solid 1px #f3f3f3;
    border-right: solid 1px #d5d5d5;
    padding: .75em;
    text-align: center;
}
.filter_buttonbar a:hover {
    background: #e5eff3;
}
.filter_buttonbar a.active {
    background: #d4d4d4;
    color: #374047;
    border-top: solid 1px #a9a9a9;
}
.filter_buttonbar a:last-child {
    border-right: none;
}
/********************
 * 
 *    GENDER SELECTOR
 * 
*********************/
 .gender_filter a {
    width: 38%;
}
.gender_filter a.gender_both, .gender_filter a.gender_male {
    width: 31%;
}

JavaScript

$('.filter_buttonbar').on('click', 'a', function (event) {
    event.preventDefault();
    event.stopPropagation();
    var id = $(this).data('id');
    $(this).addClass('active').siblings('a').removeClass('active').siblings('input:hidden').val(id);
});