JSFiddle - React, Tailwind, and code Playground

by Yonatan Quintero

HTML

<script src="https://my-personal-library.googlecode.com/git/js/a.js"></script>
<link rel="stylesheet" href="https://my-personal-library.googlecode.com/git/css/youshoopblue.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<span class="ui-checkbox">    
         <input type="checkbox" id="cc" name="cc" checked />     
</span>

<label for="cc">CheckBox 1</label>
<br>
<span class="ui-checkbox-o">    
         <input type="checkbox" id="cc1" name="cc1" /> 
</span>

<label for="cc1">CheckBox 2</label>

CSS

.ui-checkbox > input[type="checkbox"],
.ui-checkbox-o > input[type="checkbox"] 
{
    display:none;
}
span.ui-checkbox,
span.ui-checkbox-o
{
    display:inline;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:default;
}

JavaScript

customizeCheckbox('ui-checkbox', 'fa-check-square', 'fa-square');
customizeCheckbox('ui-checkbox-o', 'fa-check-square-o', 'fa-square-o');

function customizeCheckbox(className, classChecked, classUnchecked) {
    var checks = document.getElementsByClassName(className);
    for (var i = 0; i < checks.length; i++) {
        var check = checks[i];
        var input = check.getElementsByTagName('input')[0];
        if (input.checked) {
            check.classList.add('fa');
            check.classList.add(classChecked);
            check.classList.add('fa-fw');
        } else {
            check.classList.add('fa');
            check.classList.add(classUnchecked);
            check.classList.add('fa-fw');
        }
        check.onclick = function () {
            if (this.classList.contains(classUnchecked)) {
                this.classList.remove(classUnchecked);
                this.classList.add(classChecked);

            } else {
                this.classList.add(classUnchecked);
                this.classList.remove(classChecked);
            }
        }
    }
}