JSFiddle - React, Tailwind, and code Playground

by Rob Sedgwick

HTML

<div class="radio-toolbar">
   
    <input type="radio" id="radio1" name="radios" value="all" checked>
    <label for="radio1">Home Win</label>

    <input type="radio" id="radio2" name="radios"value="false">
    <label for="radio2">Draw</label>

    <input type="radio" id="radio3" name="radios" value="true">
    <label for="radio3">Away Win</label> 

</div>

CSS

.radio-toolbar input[type="radio"] {
    display:none; 
}

.radio-toolbar label {
    display:inline-block;
    background-color:#ddd;
    padding:4px 11px;
    font-family:Arial;
    font-size:medium;
}

.radio-toolbar input[type="radio"]:checked + label { 
    background-color:#bbb;
}