JSFiddle - React, Tailwind, and code Playground

by monteslu

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<br><br><br><br><br><br>

<div id="wrapper">
    
<button dojoType="dijit.form.Button" id="penToolBtn">pen</button>
           <div class="myClass" dojoType="dijit.Tooltip" connectId="penToolBtn" position="right" showDelay="0">Pencil<br>(freehand drawing)</div>
    
    <br><br>
    
<div dojoType="dijit.form.DropDownButton" dropDownPosition="after">
    <span>(Right) TooltipDialog test</span>
    <div class="tooltipAfter quad-portlet" dojoType="dijit.TooltipDialog" id="ttDialogRight" title="Tooltip Dialog">
        <div class="dijitDialogPaneContentArea">
            <label for="name3">Name:</label>
            <input dojoType="dijit.form.TextBox" id="name3" name="name3">
            <br>
            <label for="hobby3">Hobby:</label>
            <input dojoType="dijit.form.TextBox" id="hobby3" name="hobby3">
            <br>
        </div>
        <div class="dijitDialogPaneActionBar">
            <button dojoType="dijit.form.Button" type="submit" onclick="alert(\'Logging in!\');">Save</button>
        </div>
    </div>
</div>
    
    <br><br>
    
    <br>
    
    <textarea dojoType="dijit.form.SimpleTextarea"> blah blah blah</textarea>    
<br>
<textarea> blah blah blah no dojo</textarea>

<br><br>
    
    <div id="treeThree"></div>


    
    
</div>

JavaScript

dojo.require('dijit.form.Button');
dojo.require('dijit.Tooltip');
dojo.require('dojo.parser');
dojo.require('dijit.form.DropDownButton');
dojo.require('dijit.TooltipDialog');
dojo.require('dijit.form.TextBox');
dojo.require('dijit.form.Button');
dojo.require('dijit.form.SimpleTextarea');
dojo.require('dojo.data.ItemFileReadStore');
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dijit.tree.dndSource");
dojo.require("dijit.Tree");


var countries = {
    identifier: 'id',
    label: 'name',
    items: [
            { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
                    timezone: '-1 UTC to +4 UTC',
                    children:[{_reference:'EG'}, {_reference:'KE'}, {_reference:'SD'}] },
                { id: 'EG', name:'Egypt', type:'country' },
                { id: 'KE', name:'Kenya', type:'country',
                        children:[{_reference:'Nairobi'}, {_reference:'Mombasa'}] },
                    { id: 'Nairobi', name:'Nairobi', type:'city' },
                    { id: 'Mombasa', name:'Mombasa', type:'city' },
                { id: 'SD', name:'Sudan', type:'country',
                        children:{_reference:'Khartoum'} },
                    { id: 'Khartoum', name:'Khartoum', type:'city' },
                { id: 'AS', name:'Asia', type:'continent',
                        children:[{_reference:'CN'}, {_reference:'IN'}, {_reference:'RU'}, {_reference:'MN'}] },
                    { id: 'CN', name:'China', type:'country' },
                    { id: 'IN', name:'India', type:'country' },
                    { id: 'RU', name:'Russia', type:'country' },
                    { id: 'MN', name:'Mongolia', type:'country' },
                { id: 'OC', name:'Oceania', type:'continent', population:'21 million',
                        children:{_reference:'AU'}},
                { id: 'AU', name:'Australia', type:'country', population:'21 million'},
                { id: 'EU', name:'Europe',...