JSFiddle - React, Tailwind, and code Playground

by absentik

HTML

<div class="с_checkbox" text="текст тут"></div><br>
<div class="с_checkbox" text="текст 2"></div><br>
<div class="с_checkbox" text="текст 3"></div><br>

CSS

.с_checkbox {
    width: 16px;
    height: 16px;
    border: 2px solid #333333;
    margin-right: 3px;
    display: inline-block; 
    background: #ffffff;
    cursor: pointer;
}
.с_checkbox:hover {
    box-shadow: 0px 0px 3px 0px #999999 inset;
}
.с_checkbox:active {
    box-shadow: 0px 0px 3px 0px #777777 inset;
    background: #ffffff url('http://cdn1.iconfinder.com/data/icons/iconic/raster/1/check.png') no-repeat center center;
}
.on {
    background: #ffffff url('http://cdn1.iconfinder.com/data/icons/iconic/raster/1/check.png') no-repeat  center center;
}

JavaScript

$(document).ready(function() {
    $(".с_checkbox").each(function(indx){
        text = $(this).attr("text");
        $(this).wrap("<label></label>");
        $(this).parents("label").append("<span>"+text+"</span>");
    });
    
    $(".с_checkbox").on('click', function() {
        if ($(this).hasClass("on"))
            $(this).removeClass("on");
        else
            $(this).addClass("on");
    });
});