JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<header></header>
<section id="js" class="selected" contenteditable="true">/* Enter JavaScript here */</section>
<section id="tests">
    <div id="result">No tests yet. Click here to add a test.</div>
    <div id="test-edit">
        <nav>
            <div class="scroll"></div>
            <ul>
                
            </ul>
            <div id="new-test" class="new-test">+ New Test</div>
            <div class="scroll"></div>
        </nav>
        <div id="selected-test">
            <div class="edit-area test-cases selected">
                <ul>
                </ul>
                <div id="new-test-case" class="new-test-case">+ New test case</div>
            </div>
            <div class="edit-area html-fixture"></div>
            <div class="edit-area css-fixture"></div>
            <div class="edit-area js-setup"></div>
            <ul>
                <li class="test-cases selected">Test cases</li>
                <li class="html-fixture">HTML fixture</li>
                <li class="css-fixture">CSS fixture</li>
                <li class="js-setup">JavaScript setup</li>
            </ul>
        </div>
    </div>
</section>
<footer></footer>

CSS

#selected-test>.test-cases>ul>li {
    height: 40px;
    background-color: #ccc;
    border: thin #333 solid;
    border-radius: 10px;
    margin: 5px;
    -moz-transition: height .3s linear;
}
#selected-test>.test-cases>ul>li.new {
    height: 0;
}
#test-edit>nav>ul>li {
    width: 100%;
}
#test-edit>nav>ul>li:not(.drag) {
    /* Animate z-index to prevent occasional flashes
       from elements below */
    -moz-transition: top .5s, z-index .5s;
    z-index: 0;
}
#test-edit>nav>ul>li.drag {
    z-index: 2;
}
#new-test-case {
    /*position: relative;
    top: -40px;*/
    z-index: 
    -moz-box-shadow: 0 20px 20px white;
    -webkit-box-shadow: 0 20px 20px white;
    box-shadow: 0 20px 20px white;
}

/************** display *******************/
#selected-test>.edit-area {
    display: none;
}
#selected-test>.edit-area.selected {
    display: block;
}
#test-edit>nav>ul.blank~#new-test {
    opacity: 0;
    /* can't use display: none because that
       messes up the transitions */
    height: 0;
    overflow: hidden;
}

/************* dimensions ****************/
html, body {
    width: 100%;
    height: 100%;
    min-height: 400px;
    min-width: 700px;
}
body>header {
    height: 50px;
}
body>footer {
    height: 20px;
}
body>section {
    height: 49px;
    /* would be 50, but need correction for
       the rounding error in flexbox */
}
body>section.selected {
    height: auto;
}
#result {
    height: 30px;
}
#test-edit>nav {
    width: 12em;
}
#selected-test>.edit-area.selected {
    display: block;
    min-height: 50px;
}
#selected-test>ul>li {
    height: 29px;
    min-width: 90px;
}
#new-test-case {
    height: 60px;
}
#selected-test>ul>li.selected {
    height: 30px;
}
#new-test,
#test-edit>nav>ul>li {
    height: 40px;
}

/************** overflow *******************/
#tests,
#selected-test,
#test-edit>nav,
body>section {
    overflow: hidden;
}
#selected-test>.edit-area,
#js.selected {
    overflow-y: auto;
}

/********* margin/padding/border...

JavaScript

var textStrings = {
    testsNotRun : 'Tests not yet run. Press Ctrl + S to save and run tests.',
    newTest : 'Enter test title',
    blankJavaScript : '/* Enter JavaScript here */'
};
var cssClasses = {
    blankTextField : 'blank',
    selected : 'selected'
};
var testSuite = (function (testSuite) {
    var Test,
        TestSuite,
        empty = function () {};
    Test = function (testTitle) {
        var testCases = [];
        this.title = testTitle || '';
        this.htmlSetup = '';
        this.cssSetup = '';
        this.javascriptSetup = empty;
        this.newTestCase = function (tcTitle) {
            var tc = {
                title : tcTitle,
                javascript : empty,
                parent : this
            };
            return testCases.push(tc);
        };
        this.eachTestCase = function (func) {
            var i, l = testCases.length;
            for (i = 0; i < l; i++) {
                func.call(testCases[i],
                    i,
                    testCases[i].title,
                    testCases[i].javascript);
            }
        };
    };
    TestSuite = function () {
        var tests = [];
        this.newTest = function (testName) {
            testName = testName || '';
            var test = new Test(testName, this);
            tests.push(test);
            return test;
        };
        this.eachTest = function (func) {
            var i, l = tests.length, t;
            for (i = 0; i < l; i++) {
                t = tests[i];
                func.call(t, t.title, t.htmlSetup, t.cssSetup, t.javascriptSetup);
            }
        };
        this.getTest = function (testNum) {
            return tests[testNum];
        };
        this.numberOfTests = function () {
            return tests.length;
        };
        this.isEmpty = function () {
            return tests.length === 0;
        };
    };
    return (new TestSuite());
}());

(function ($) {
    $.fn.defaultText = function (options) {
        var...