JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar-cards-archive">
    <ul>
        <li class="cat-item cat-item-12">
            <label>
                <input type="checkbox" name="ofcards-rarity[]" value="12">Common (223)</label>
        </li>
        <li class="cat-item cat-item-14">
            <label>
                <input type="checkbox" name="ofcards-rarity[]" value="14">Epic (40)</label>
        </li>
        <li class="cat-item cat-item-11">
            <label>
                <input type="checkbox" name="ofcards-rarity[]" value="11">Free (83)</label>
        </li>
        <li class="cat-item cat-item-15">
            <label>
                <input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)</label>
        </li>
        <li class="cat-item cat-item-13">
            <label>
                <input type="checkbox" name="ofcards-rarity[]" value="13">Rare (84)</label>
        </li>
    </ul>
</div>

CSS

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
 #sidebar-cards-archive ul li {
    list-style: none;
}
/*** custom checkboxes ***/
 input[type=checkbox] {
     position: relative;
}
/* to hide the checkbox itself */
 label>input[type=checkbox]:before {
     position: absolute;
    background-color: #FFFFFF;
    height: 100%;
width: 100%;
    font-family: FontAwesome;
    display: inline-block;
    content:"\f096";
    letter-spacing: 10px;
}
/* space between checkbox and label */
 label>input[type=checkbox]:checked:before {
     font-family: FontAwesome;
    display: inline-block;
    content:"\f046";
    letter-spacing: 5px;
}
/* allow space for check mark */