JSFiddle - React, Tailwind, and code Playground

by acjackson911

HTML

<label>
    <input type="radio" name="group1" /><span class="radio1"></span>label 1 text</label>
<label>
    <input type="radio" name="group1" /><span class="radio2"></span>label 2 text</label>
<label>
    <input type="radio" name="group1" /><span class="radio3"></span>label 3 text</label>
<label>
    <input type="radio" name="group1" /><span class="radio4"></span>label 4 text</label>

CSS

input[type=radio] {
    display: none;
}
input[type=radio] + span {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;
}
input[type=radio]:checked + span {
    background-color: #ffa;
}
.radio1 {
    width: 0.5em;
    height: 0.5em;
}
.radio2 {
    width: 0.75em;
    height: 0.75em;
}
.radio3 {
    width: 1em;
    height: 1em;
}
.radio4 {
    width: 1.5em;
    height: 1.5em;
}