JSFiddle - React, Tailwind, and code Playground

by souravdasroy

HTML

<link href="http://cdn.kendostatic.com/2011.3.1007/styles/examples.min.css" rel="stylesheet"/>        <link href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.common.min.css" rel="stylesheet"/>        <link href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.kendo.min.css" rel="stylesheet"/>        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>        <script src="http://cdn.kendostatic.com/2011.3.1007/js/kendo.all.min.js"></script>   
<div id="tabstrip" style="height: 100%; border: 1px">
   <ul>
       <li>First tab</li>
       <li>Second tab</li>
   </ul>
   <div>

   </div>
   <div>
       <div id="vertical" >
           <div>
               <div id="horizontal1" >
                   <div><div id="grid"></div></div>
                   <div><div id="grid1"></div></div>
               </div>
           </div>
           <div>
               <div id="horizontal2" >
                   <div></div>
                   <div></div>
               </div>
           </div>
           <div>
               <div id="horizontal3" >
                   <div></div>
                   <div></div>
               </div>
           </div>
       </div>
   </div>
</div>

JavaScript

var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
    lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
    cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
    titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
    birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];

function createRandomData(count) {
    var data = [],
        now = new Date();
    for (var i = 0; i < count; i++) {
        var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
            lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
            city = cities[Math.floor(Math.random() * cities.length)],
            title = titles[Math.floor(Math.random() * titles.length)],
            birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
            age = now.getFullYear() - birthDate.getFullYear();

        data.push({
            Id: i + 1,
            FirstName: firstName,
            LastName: lastName,
            City: city,
            Title: title,
            BirthDate: birthDate,
            Age: age
        });
    }
    return data;
}
           function onSelect(e) {
               setTimeout( function () {
                   $(e.contentElement).find(".t-splitter").each( function () {
                       $(this).data("kendoSplitter")._resize();
                   });
               }, 410 );
           }

              ...