JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<button class="btn btn-info" data-toggle="button" data-active-class="success">Single Toggle</button>

<div class="padding"></div>

<div class="btn-group" data-toggle="buttons-checkbox">
    <div class="btn btn-small btn-default" data-active-class="info">btn-group 1</div>
    <div class="btn btn-small btn-default" data-active-class="success">btn-group 2</div>
    <div class="btn btn-small btn-default" data-active-class="warning">btn-group 3</div>
    <div class="btn btn-small btn-default" data-active-class="danger">btn-group 4</div>
</div>

<div class="padding"></div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default" data-active-class="success">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> yes
  </label>
  <label class="btn btn-default" data-active-class="danger">
    <input type="radio" name="options" id="option2" autocomplete="off"> no
  </label>
  <label class="btn btn-default" data-active-class="warning">
    <input type="radio" name="options" id="option3" autocomplete="off"> maybe
  </label>
</div>

CSS

.padding{padding:20px;}

.btn.active[data-active-class="primary"] {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}
.btn.active[data-active-class="success"] {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}
.btn.active[data-active-class="info"] {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}
.btn.active[data-active-class="warning"] {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512;
}
.btn.active[data-active-class="danger"] {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}