JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://jp.igniteui.com/js/external/knockout-latest.js"></script>
<script src="https://jp.igniteui.com/js/external/knockout.mapping-latest.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.tree.knockout-extensions.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.editors.knockout-extensions.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div><span class="message">データをサーバーから取得しています...</span></div>
    <div class="container">
        <div id="tree" data-bind="igTree: {
		    dataSource: data,
		    width: '100%',
            dataSourceType: 'json',
            singleBranchExpand: true,
		    bindings: {
			    textKey: 'CategoryName',
			    valueKey: 'ID',
                childDataProperty: 'Products',
                bindings: {
                    textKey: 'ProductName',
                    valueKey: 'ProductID'
                }
		    }
	    }"></div>
    </div>

    <div class="container">
        <div id="categoryEditorsContainer" tabindex="0">
            <h4>カテゴリ</h4>
            <table>
                <colgroup>
                    <col span="1" style="min-width: 30%;">
                    <col span="1" style="width: 68%;">
     ...

CSS

.message
        {
            color: darkorange;
            font-weight: bold;
        }

        .container
        {
            width: 40%;
            position: relative;
            float: left;
            padding: 0px 10px 0px 10px;
        }

        #tree
        {
            border-right: 1px solid grey;
        }

        #categoryEditorsContainer, #productEditorsContainer
        {
            display: none;
        }

		@media screen and (max-width: 600px) {
    		.container { 
				width: 100%;
				clear: both;
				padding-top: 10px;
    		}
			#tree
			{
				border-right: none;
				border-bottom: 1px solid grey;
			}
        }

JavaScript

$(function () {
var viewModel;

        //  Define empty objects for Category and Product to be used when
        //  nothing is to be rendered in the editor controls
        ViewModel.prototype.categoryEmpty = {
            CategoryName: "",
            Description: "",
            ProductCount: 0
        };
        ViewModel.prototype.productEmpty = {
            ProductName: "",
            QuantityPerUnit: 0.0,
            UnitPrice: 0.0,
            UnitsInStock: 0.0,
            UnitsOnOrder: 0.0,
            Discontinued: false
        };

        //  Creates a ViewModel object
        function ViewModel(categories) {
            var self = this;

            this.data = categories;
            this.Category = ko.observable(self.categoryEmpty);
            this.Product = ko.observable(self.productEmpty);

            this.SetSelected = function (item) {
                if (item.ProductName != null) {
                    self.Product(item);
                }
                else if (item.CategoryName != null) {
                    self.Category(item);
                    self.Product(self.productEmpty);
                }
            };
        };

        $(function () {
            $(".message").ajaxError(function () {
                $(this).css("color", "red");
                $(this).text("製品カテゴリを取得するエラーが発生しました。");
            });
            //  Get all the Categories and their related Products from the Northwind database
               $.getJSON("https://www.igniteui.com/api/categories?callback=?", function (data) {
                viewModel = new ViewModel(ko.mapping.fromJS(data.d.results));

                viewModel.Category.subscribe(function (item) {
                    setContainerVisible(item, "#categoryEditorsContainer");
                });

                viewModel.Product.subscribe(function (item) {
                    setContainerVisible(item, "#productEditorsContainer");
                });

                ko.applyBindings(viewModel);
 ...