JSFiddle - React, Tailwind, and code Playground

by Nitro3k

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<ul id='panelbar'>
    <li class='k-item k-last k-state-default' aria-expanded='false'>Tab^1<input type='checkbox' id='c0' class='cbSelect' /><label for='c0'><a href="#" id='cbSelect0'></a></label></li>
    <li class='k-item k-last k-state-default' aria-expanded='false'>Tab^1<input type='checkbox' id='c1' class='cbSelect' /><label for='c1'><a href="#" id='cbSelect1'></a></label></li>
</ul>

CSS

.cbSelect {
    float:right;
    margin-top:12px;
}
.k-panelbar .k-panelbar-expand, .k-panelbar .k-panelbar-collapse {
    right: auto;
    left: 2px;
}
.k-panelbar>.k-item>.k-link {
    padding: 0 0.5em 0 1.2em;
}
.k-panelbar-expand, .k-panelbar-expand, .k-panelbar-collapse{
    top:10px;
}

input[type="checkbox"]
{
    position: absolute;
    top: -99999px;
    left: -99999px;
}

input[type="checkbox"] + label a
{
    display:block;
    width:14px;
    height:14px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:red;
    cursor:pointer;
    position: relative;
    float:right;
    margin-top:10px;
    margin-right:10px;
}

input[type="checkbox"]:checked + label a 
{
    background:green;
}

JavaScript

$("#panelbar").kendoPanelBar({
    expandMode: "single"
});

$("#panelbar").on("click", "label a", function(evt) {
    var chkbx = $(this).closest('li').find('input');
    chkbx.prop('checked', !chkbx.prop('checked'));
    evt.stopImmediatePropagation();
})