JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="row">
    <button class="span2 btn">Date</button>
    <button id="jc" class="span3 btn">Job Category</button>
    <button class="span2 btn">Job Priority</button>
    <button class="span3 btn">Workflow Status</button>
    <button class="span3 btn">Workflow Status</button>
    <button class="span3 btn">Andre Janian</button>

    <button class="span1 btn custom"> <i class="icon-arrow-left"></i>

    </button>
    <button class="span1 btn custom"> <i class="icon-refresh"></i>

    </button>
    <p></p>
</div>
<div class="row">
    <div class="span2">
        <p id="forDate"></p>
    </div>
    <div class="span2">
        <p id="forJC"></p>
    </div>
    <div class="span2">
        <p id="forJP"></p>
    </div>
    <div class="span2">
        <p id="forWS"></p>
    </div>
</div>
<div class="row" style="margin-top:150px">
    <div class="span4 chart">
        <label>Date</label>
        <button class="btn" data-target="forDate">Today</button>
        <button class="btn" data-target="forDate">Tomorrow</button>
        <div class="mt">
            <label>Job Category</label>
            <button class="btn" data-target="forJC">JC1</button>
            <button class="btn" data-target="forJC">JC2</button>
            <button class="btn" data-target="forJC">JC3</button>
            <button class="btn" data-target="forJC">JC4</button>
        </div>
        <div class="mt">
            <label>Job Priority</label>
            <button class="btn" data-target="forJP">High</button>
            <button class="btn" data-target="forJP">Medium</button>
            <button class="btn" data-target="forJP">Low</button>
        </div>
        <div class="mt">
            <label>Workflow Status</label>
            <button class="btn"...

CSS

.btn {
    color:white;
    background:none;
    background-color:#B3B3B3;
    border-radius:0;
    text-shadow:none;
}
.btn:hover {
    background-color:#29ABE2;
    color:white;
}
.custom {
    background:none;
}
.chart {
    background-color: #EAEAEA;
    padding: 20px;
}
.mt {
    margin-top:10px;
}

JavaScript

$(document).ready(function () {
    loadJC();
});

function loadJC() {
    $('#jc').attr('style', 'background-color:#29ABE2;');
}

$("button").click(function () {
    var text = $(this).text();
    var target = '#' + $(this).data().target;
    $(target).html(text);
});