JSFiddle - React, Tailwind, and code Playground

by Erik Wegner

HTML

<input type="radio" class="cb" value="0" name="filter" id="r1" checked="checked"><label for="r1">Errors/Warnings</label>
<input type="radio" class="cb" value="1" name="filter" id="r2"><label for="r2">All Hosts</label>
<input type="radio" class="cb" value="2" name="filter" id="r3"><label for="r3">All Services</label>

CSS

/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type=radio] {
    display:none;
    margin:10px;
}
 
/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 1ex 2em;
    background-color: #e7e7e7;
    border-color: #ddd;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label {
   background-image: none;
    background-color:#a0a0a0;
}