JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn-group" data-toggle="buttons-checkbox"> 
    <div class='input-group input-group-sm'>
        <span class="input-group-addon">Week</span>
    </div>
    <button class="btn" name="WeekButtonGroup" id="week1_sat"> S</button>
    <button class="btn" name="WeekButtonGroup" id="week1_sun"> S</button>
    <button class="btn" name="WeekButtonGroup" id="week1_mon"> M</button>
    <button class="btn" name="WeekButtonGroup" id="week1_tue"> T</button>
    <button class="btn" name="WeekButtonGroup" id="week1_wen"> W</button>
    <button class="btn" name="WeekButtonGroup" id="week1_thu"> T</button>
    <button class="btn" name="WeekButtonGroup" id="week1_fri"> F</button>
</div>

CSS

.btn {
    display: block;
    border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    padding: 4px 8px;
    border: 0;
    line-height: 1em;
    cursor: pointer;
    -webkit-appearance: none;
    float: left;
    outline: none;
    margin: 0 5px 5px 0;
    background: #eaeaea;
    color: #444;
    font-weight: normal;
}

.btn.clicked {
    background: #ff0;
}

JavaScript

$('.btn').click(function() {
    $(this).toggleClass('{"background-color": "yellow", "font-size": "200%"}');
});