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" id="tree"></div>
    <div>
        <div style="margin: 50px;">
            <div class="row">
                <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 glyphicon-ok form-control-feedback"></i></span>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="InputEmail">Your Email</label>
                            <div class="input-group">
                                <input type="email" class="form-control" id="InputEmail" name="InputEmail" placeholder="Enter Email" required> <span...

CSS

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

JavaScript

$(function () {
    $("#splitter").igSplitter({
        height: "auto",
        panels: [{
            size: 160,
            min: 100,
            max: 250
        }]
    });
    $("#tree").igTree({
        dataSource: continentsWithCountries,
        dataSourceType: "json",
        bindings: {
            textKey: "Text",
            valueKey: "Text",
            childDataProperty: "Countries"
        }
    });
});