JSFiddle - React, Tailwind, and code Playground

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-state-active'> <span class='k-link k-state-selected'>Tab 1 <input type="checkbox" class="cbSelect"/></span>

        <div>Test 1</div>
    </li>
    <li> <span class='k-link k-state-selected'> Tab2 <input type="checkbox" class="cbSelect"/></span>

        <div>Test 2</div>
    </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;
}

JavaScript

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

$("#panelbar").on("click", "input.cbSelect", function(evt) {
    evt.stopPropagation();
})