JSFiddle - React, Tailwind, and code Playground

HTML

<div class="small">
    <input type="radio" id="option1" name="testing"/>
    <label class="fa fa-square-o" for="option1">This is a test</label>
</div>
<div class="medium">
    <input type="radio" id="option2" name="testing"/>
    <label class="fa fa-square-o" for="option2">Slightly larger label</label>
</div>
<div class="large">
    <input type="radio" id="option3" name="testing"/>
    <label class="fa fa-square-o" for="option3">Another one</label>
</div>

SCSS

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

body {
    padding: 1em;
    font-size: 14px;
}

.small {
    font-size: 14px;
}

.medium {
    font-size: 18px;
}

.large {
    font-size: 22px;
}

input[type=radio] {
    display:none;
}
input[type=radio] + label {
    cursor: pointer;
    color: #aaa;
    
    font-size: 2em;
    line-height: 1em;
    text-align: center;
}
input[type=radio] + label:before {
    /* font awesome style */
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    
    width: 1em;
    font-size: 1em;
    margin-right: 0.2em;
    vertical-align: middle;
}
input[type=radio]:checked + label:before {
    color: green;
}
input[type=radio]:checked + label:before {
    content: '\f14a';
}