JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Chris W's stuff -->
<div style="margin:30px;">
    <form>
        
        <h3>Radio Buttons</h3>
        <div>
            <input id="radio-1" class="my-radio" name="radio-group" type="radio" checked>
            <label for="radio-1" class="my-radio-label">First Choice</label>
        </div>
        <div>
            <input id="radio-2" class="my-radio"name="radio-group" type="radio">
            <label for="radio-2" class="my-radio-label">Second Choice</label>
        </div>
        <div>
            <input id="radio-3" class="my-radio" name="radio-group" type="radio">
            <label for="radio-3" class="my-radio-label">Third Choice</label>
        </div>
      
        <h3>Checkboxes</h3>
        <div>
            <input id="checkbox-1" class="my-checkbox" name="checkbox-1" type="checkbox" checked>
            <label for="checkbox-1" class="my-checkbox-label">First Choice</label>
        </div>
        <div>
            <input id="checkbox-2" class="my-checkbox" name="checkbox-2" type="checkbox">
            <label for="checkbox-2" class="my-checkbox-label">Second Choice</label>
        </div>
        <div>
            <input id="checkbox-3" class="my-checkbox" name="checkbox-3" type="checkbox">
            <label for="checkbox-3"class="my-checkbox-label">Third Choice</label>    
        </div>
    </form>
</div>

CSS

/* Chris W's stuff */

.my-checkbox, .my-radio {
    opacity: 0;
    position: absolute;   
}
.my-checkbox, .my-checkbox-label, .my-radio, .my-radio-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.my-checkbox-label, .my-radio-label {
    position: relative;
}

.my-checkbox + .my-checkbox-label:before, .my-radio + .my-radio-label:before {
    font-family: 'Zapf Dingbats';
    content: '\2705';
    background: #fff;
    border: 2px solid #ccc;
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    padding: 2px;
    text-align: center;
    font-size:30px;
    color: #ccc;
}

.my-checkbox:checked + .my-checkbox-label:before {
    content: "\2714";
    font-family: 'Zapf Dingbats';
    font-weight: 900;
    font-size: 30px;
    border: #005C1F 2px solid;
    background: #0a0;
    color: #fff;
    -webkit-box-shadow: 0px 3px 12px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 3px 12px -3px rgba(0,0,0,0.75);
    box-shadow: 0px 3px 12px -3px rgba(0,0,0,0.75);
}

.my-radio + .my-radio-label:before {
    font-family: 'Zapf Dingbats';
    border-radius: 50%;
    content: "\2705";
    font-size: 30px;
    color: #ccc;
}

.my-radio:checked + .my-radio-label:before {
    content: "\2714";
    font-family: 'Zapf Dingbats';
    font-weight: 900;
    color: #fff;
    font-size: 30px;
    background: #0a0;
    border: #005C1F 2px solid;
    -webkit-box-shadow: 0px 3px 12px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 3px 12px -3px rgba(0,0,0,0.75);
    box-shadow: 0px 3px 12px -3px rgba(0,0,0,0.75);
}