JSFiddle - React, Tailwind, and code Playground

HTML

<label>NAME
<span><a class="internal_market_link" data-destination="' + this.Destination + '" data-id="' + this.Id + '"><span><input type="checkbox" class="multiselect-markets" style="display:none;" id="cb' + this.Id + '"><label for="cb' + this.Id + '" class="checkmark"></label></span></a></span>
</label>

CSS

.checkmark {
    display: inline-block;
    width: 22px;
    /*height: 22px;*/
    height:17px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    margin-left:10%;
    margin-bottom:1px;
}
.checkmark:before {
    content: '';
    position: absolute;
    width: 3px;
    height: 9px;
    background-color: #ccc;
    left: 11px;
    top: 6px;
}

.checkmark {
    cursor: pointer;
}

 .checkmark:after {
        content: '';
        position: absolute;
        width: 3px;
        height: 3px;
        background-color: #ccc;
        left: 8px;
        top: 12px;
    }

input[type="checkbox"]:checked + .checkmark:before,
input[type="checkbox"]:checked + .checkmark:after {
    background-color: blue;
}