JSFiddle - React, Tailwind, and code Playground

by mikecmpbll

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<label for="cb1">
  <div class="btn btn-primary btn-sm category-checkbox">
    <input type="checkbox" id="cb1">
    Behaviour
  </div>
</label>
<label for="cb2">
  <div class="btn btn-danger btn-sm category-checkbox">
    <input type="checkbox" id="cb2">
    Child Protection
  </div>
</label>
<label for="cb3">
  <div class="btn btn-warning btn-sm category-checkbox">
    <input type="checkbox" id="cb3">
    Attendance
  </div>
</label>

CSS

.category-checkbox {
  background: transparent;
  color: black;
}

.btn-primary .category-checkbox {
  color: 1px solid blue;
}

.btn-danger .category-checkbox {
  color: 1px solid red;
}

.btn-warning .category-checkbox {
  color: 1px solid yellow;
}