JSFiddle - React, Tailwind, and code Playground

by anar1811

HTML

<ul>                
    <li>
        <input id="cfirst" type="checkbox" name="first" checked hidden />
        <label for="cfirst">Checked checkbox</label>
    </li>
    <li>
        <input id="csecond" type="checkbox" name="second" hidden />
        <label for="csecond">Unchecked checkbox</label>
    </li>
    <li>
        <input id="cthird" type="checkbox" name="third" hidden disabled />
        <label for="cthird">Disabled checkbox</label>
    </li>
    <li>
        <input id="clast" type="checkbox" name="last" checked hidden disabled />
        <label for="clast">Disabled checked checkbox</label>
    </li>
</ul>
<ul>                
    <li>
        <input id="rfirst" type="radio" name="radio" checked hidden />
        <label for="rfirst">Checked radio</label>
    </li>
    <li>
        <input id="rsecond" type="radio" name="radio" hidden />
        <label for="rsecond">Unchecked radio</label>
    </li>
    <li>
        <input id="rthird" type="radio" name="radio" hidden disabled />
        <label for="rthird">Disabled radio</label>
    </li>
</ul>

CSS

ul{margin:0;padding:0;list-style:none}
input[type="checkbox"],
input[type="radio"] {
    display:none;
    margin:5px 5px 0 0;
    padding:0;
}
input[type="checkbox"] + label, 
input[type="radio"] + label {
  font: 16px bold;
  color: #141414;
  cursor: pointer;
}
input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
    content: "";
    display: inline-block;
    height: 25px;
    width: 25px;
    line-height:25px;
    margin: 0 5px 0 0;
    background-image: url(http://kino4u.3dn.ru/sprit.png);
    background-repeat: no-repeat;
}
input[type="checkbox"] + label::before {
background-position: -5px -90px;
}
input[type="checkbox"]:checked + label::before {
    background-position: -5px -60px;
}
input[type="checkbox"]:disabled + label::before {
    background-position: -5px -120px;
}
input[type="checkbox"]:checked:disabled + label::before {
    background-position: -5px -30px;
}
/*sadasdas*/
input[type="radio"] + label::before {
    background-position: -35px -90px;
}
input[type="radio"]:checked + label::before {
    background-position: -35px -60px;
}
input[type="radio"]:disabled + label::before {
    background-position: -35px -120px;
}
input[type="radio"]:checked:disabled + label::before {
    background-position: -35px -230px;
}