JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/drawer/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.802/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2022.2.802/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.802/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section wide">
<div id="toolbar"></div>
<div id="drawer">
<div id="drawer-content">
<div id="Inbox">1
</div>
<div id="Notifications" class="hidden">2
</div>
<div id="Calendar" class="hidden">3
</div>
<div id="Attachments" class="hidden">4
</div>
<div id="Favourites" class="hidden">5
</div>
</div>
</div>
</div>
<script>
var isVisible = {
inbox: true,
notifications: false,
calendar: false,
attachements: true,
favourites: true
};
$(document).ready(function () {
$("#drawer").kendoDrawer({
template: "<ul> \
<li data-role='drawer-item' class='k-selected' data-bind='visible: isVisible.inbox'> \
<span class='k-icon k-i-inbox'></span><span class='k-item-text' data-id='Inbox' >Inbox</span></li> \
<li data-role='drawer-separator'></li> \
<li data-role='drawer-item' data-bind='visible: isVisible.notification'> \
<span class='k-icon k-i-notification k-i-bell'></span><span class='k-item-text' data-id='Notifications'>Notifications</span></li> \
<li...