JSFiddle - React, Tailwind, and code Playground

by Joshua McKearin

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.lob.js"></script>
<script src="http://igniteui.com/js-data/continents-with-countries-and-cities"></script>
<link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<div id="splitter">
    <div style="overflow: auto"></div>
    <div>
        <div style="margin: 50px;">
        <div class="row">
            <div class="col-md-12"> <small><i></i>Add alerts if form ok... success, else error.</i></small>

                <div class="alert alert-success"><strong><span class="glyphicon glyphicon-send"></span> Success! Message sent. (If form ok!)</strong>
                </div>
                <div class="alert alert-danger"><span class="glyphicon glyphicon-alert"></span><strong> Error! Please check the inputs. (If form error!)</strong>
                </div>
            </div>
            <form role="form" action="" method="post">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="InputName">Your Name</label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required> <span class="input-group-addon"><i class="glyphicon...

CSS

#tree {
    overflow: hidden;
}
@media all and (max-width: 480px) {
    #splitter {
        font-size: 16px;
    }
}
p {
    padding: 10px;
}

JavaScript

$(function () {
    $("#splitter").igSplitter({
        height: "300px",
        panels: [{
            size: 160,
            min: 100,
            max: 250
        }]
    });
    $("#tree").igTree({
        dataSource: continentsWithCountries,
        dataSourceType: "json",
        bindings: {
            textKey: "Text",
            valueKey: "Text",
            childDataProperty: "Countries"
        }
    });
    $("#tree").on("igtreeselectionchanged", function (sender, eventArgs) {
        var node = eventArgs.selectedNodes[0];
        if (node.data.Description) {
            $("#splitter").igSplitter("secondPanel").html($("<p></p>").text(node.data.Description));
        } else {
            $("#splitter").igSplitter("secondPanel").html($("<p></p>").text("No information found."));
        }
    });
});