JSFiddle - React, Tailwind, and code Playground

HTML

<div id="display_menu">
  <label class="heading">Radios:</label>
  <div class="buttonset">
    <input type="radio" name="option" id="option1"/><label for="option1">Option 1</label><input type="radio" name="option" id="option2"/><label for="option2">Option 2</label><input type="radio" name="option" checked="checked" id="option3"/><label for="option3">Option 3</label>
  </div>
  
  <br/><br/>
  

  <div class="buttonset">
    <input type="checkbox" name="check" id="check1"/><label for="check1">Check 1</label>
</div>

CSS

#display_menu {
  background: white;
  font: 12px sans-serif;
  height: 30px;
  line-height: 30px;
  margin-bottom: 9px;
  margin-top: 20px;
}
#display_menu .heading {
  color: gray;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px; }
#display_menu .buttonset {
  display: inline-block;
}
input[type=radio], input[type=checkbox] {
  display: none;
}
#display_menu .buttonset input[type=radio]:checked + label {
  background-color: #d7003e;
  color: white;
}
#display_menu .buttonset input[type=checkbox]:checked + label {
  background-color: #d7003e;
  color: white;
}
#display_menu .buttonset label {
  background: #efefef;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 8px;
}
#display_menu .buttonset label:hover {
  background-color: #e5e5e5;
}