JSFiddle - React, Tailwind, and code Playground

by marcus211

HTML

<div class="radios">
    <input type="radio" name="rGroup" value="1" id="r1" checked="checked" />
    <label class="radio" for="r1">1</label>
    <input type="radio" name="rGroup" value="2" id="r2" />
    <label class="radio" for="r2">2</label>
    <input type="radio" name="rGroup" value="3" id="r3" />
    <label class="radio" for="r3">3</label>
</div>

CSS

.radios .radio{
    background-color:#c5e043;
    display:block;
    width:50px;
    height:30px;
    cursor:pointer
}

.radios input[type=radio]{
    display:none
}

.radios input[type=radio]:checked + .radio{
    background-color:#241009
}