JSFiddle - React, Tailwind, and code Playground

by isochronous

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://aspnet-skins.telerikstatic.com/mvc/2012.1.419/telerik.metro.min.css">
<link rel="stylesheet" href="http://aspnet-skins.telerikstatic.com/mvc/2012.1.419/telerik.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.metro.min.css">
<div id="container"></div>
<div class="k-rtl t-rtl k-numerictextbox" style="border:1px solid red"></div>
<div id="states" style="border:1px solid blue"></div>

JavaScript

var kClasses = ["k-tabstrip","k-arrow-up","k-arrow-down","k-arrow-first","k-arrow-prev","k-arrow-next","k-arrow-last","k-arrow-up-small","k-arrow-down-small","k-expand","k-plus", "k-plus-disabled","k-collapse","k-minus","k-minus-disabled","k-edit","k-delete","k-group-delete","k-close","k-insert","k-update","k-cancel","k-denied","k-add","k-filter","k-clear-filter","k-refresh","k-restore","k-maximize","k-minimize","k-resize-se","k-icon-calendar","k-icon-clock","k-search","k-custom","k-insert-top","k-insert-middle","k-insert-bottom","k-drop-hint","k-warning","k-image","k-bold","k-italic","k-underline","k-strikethrough","k-justifyLeft","k-justifyCenter","k-justifyRight","k-justifyFull","k-insertUnorderedList","k-insertOrderedList","k-indent","k-outdent","k-createLink","k-unlink","k-insertImage","k-retry","k-success","k-search","k-addfolder ","k-goup"],
    kRtlClasses = ["k-expand","k-plus", "k-plus-disabled","k-collapse","k-minus","k-minus-disabled"];
    states = ["k-state-selected", "k-state-hover", "k-state-disabled"];
stateIcons = ["k-arrow-first","k-arrow-next","k-arrow-prev","k-arrow-last","k-arrow-up","k-arrow-down"];

$.each(kClasses, function(index, value) { 
    var s = "<button class='k-button' style='display:inline-block'>" + value + " <span class='k-icon " + value + "'>&nbsp;</span></button>";
    $("#container").append(s);
    value = value.replace("k-", "t-");
    s = "<button class='t-button' style='display:inline-block'>" + value + " <span class='t-icon " + value + "'>&nbsp;</span></button><br />";
    $("#container").append(s);
});

$.each(kRtlClasses, function(index, value) {
    var s = "<button class='k-button' style='display:inline-block'>" + value + " <span class='k-icon " + value + "'>&nbsp;</span></button>";
    $(".k-rtl").append(s);
    value = value.replace("k-", "t-");
    s = "<button class='t-button' style='display:inline-block'>" + value + " <span class='t-icon " + value + "'>&nbsp;</span></button><br />";
   ...