JSFiddle - React, Tailwind, and code Playground

by swfour

HTML

<div class="category-item">
    <div class="input-container">
        <input class='checkbox' id='checkbox' type="checkbox" />
        <label for='checkbox' class='checkbox'></label>
    </div>
</div>

CSS

.category-item {
    display: table;
    border: 1px solid #cccccc;
    margin: 0;
    padding: 0;
    height:30px;
}
.category-item .input-container {
    display: table-cell;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    height:30px;
}
label.checkbox {
    position:relative;
    vertical-align: middle;
    border:1px solid black;
    height:10px;
    width:10px;
    margin:0;
    padding:0;
    margin:-2px 0 2px 0;
    line-height:1em;
    padding:0;
    overflow:hidden;
    display:inline-block;
}
input.checkbox {
    appearance:none;
    height:0;
    width:0;
    overflow:hidden;
    display:none;
    margin:0;
    padding:0;
    -webkit-appearance:none;
}
input.checkbox:checked +label.checkbox:before {
    content:'\2713';
    position:absolute;
    top:-3px;
    font-size:10px;
    left:2px;
}