JSFiddle - React, Tailwind, and code Playground

by Martin Lemahieu

HTML

<div class="form-line">
    <input id="test-1" type="radio" name="test" value="1" class="hide-input" />
    <label for="test-1" class="button">Radio number one</label>
</div>
<div class="form-line">
   <input id="test-2" type="radio" name="test" value="2" checked="checked" class="hide-input" />
   <label for="test-2" class="button">Radio number two</label>
</div>

CSS

.form-line {
    margin: 12px;
}

.hide-input {
  display: none;
}

.radiobutton {
    margin: 5px;
}

.hide-input:checked + label
{
    font-weight: bold;  
}

.button {
    padding: 3px;
    color: black;
    background-color: #dddddd;
    border: 1px solid #bbbbbb;
}