JSFiddle - React, Tailwind, and code Playground

by Bryan Weaver

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

CSS

:checked {
    font-weight: bold;
}

/* Optional other stuff just to make it look better */
label {
    display: inline-block;
    width: 200px;
    padding: 5px;
}
label:hover {
    background:#eee;
    cursor:pointer;
    border: 1px solid #aaa;
    padding: 4px;
}