JSFiddle - React, Tailwind, and code Playground

by irwan dwiyanto

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="col-md-6">
  <label for="status">Status</label>
  <br/>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default btn-on btn-sm ">
      <input type="radio" value="0" name="status" id="aktif">Active</label>
    <label class="btn btn-default btn-off btn-sm active">
      <input type="radio" value="1" name="status" id="deaktif">Deactive</label>
  </div>
</div>

CSS

.btn-default.btn-on.active {
  background-color: #5BB75B;
  color: white;
}

.btn-default.btn-off.active {
  background-color: #DA4F49;
  color: white;
}