JSFiddle - React, Tailwind, and code Playground

by Thunder Hemlock

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="https://raw.githubusercontent.com/mholt/PapaParse/master/papaparse.min.js"></script>
<body onload="onBodyLoad()">
    <!--START OF EXTERNAL HEADER-->
    <div data-role="header" data-theme="a" data-position="fixed" id="site-header">
        <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-left"> <a href="#info-panel" class="ui-btn ui-btn-clear ui-icon-left ui-btn-icon-notext ui-corner-all ui-icon-bars">Info</a>  <a href="#test-page" class="ui-btn ui-btn-clear ui-icon-left ui-btn-icon-notext ui-corner-all ui-icon-cloud">Dropbox</a>
 <a href="#fileSelect-popup" data-rel="popup" data-transition="slidedown" class="ui-btn ui-btn-clear ui-btn-icon-notext ui-corner-all ui-icon-arrow-d">File</a>
 <a href="#export" class="ui-btn ui-btn-clear ui-icon-left ui-btn-icon-notext ui-corner-all ui-icon-arrow-u">Export</a> 
        </div>
        <!--left control group-->
         <h3>Essay Grader</h3>

        <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-right"> <a href="#comment-interface" class="ui-btn ui-btn-clear ui-icon-right ui-corner-all">Save/New</a>
 <a href="#popup-outside-page" data-rel="popup" data-transition="slidedown" class="ui-btn ui-btn-clear ui-icon-right ui-btn-icon-notext ui-corner-all ui-icon-bullets">List</a>
 <a href="#doc-panel" class="ui-btn ui-btn-clear ui-icon-right ui-btn-icon-notext ui-corner-all ui-icon-eye" id="preview">Preview</a>

        </div>
        <!--control group-->
    </div>
    <!-- /external header -->
    
    <!--EXTERNAL DOCUMENT VIEW PANEL-->
    
    <!--EXTERNAL SITE FOOTER-->
    <div data-role="footer" data-theme="a" data-position="fixed" id="site-footer">
        <div data-role="collapsible" data-theme="a" data-content-theme="a">    
             <h4>Feedback Document Preview</h4>
            <p id="docPreview"></p>
        </div><!--preview collapsible-->
   ...

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.info-panel-heading {
    text-align: center;
}
.home-page {
    width: 100%;
    height: 100%;
}
.home-page-center {
    text-align:center;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    background-color:transparent;
}
.home-page-center p {
    color: grey;
}
#docPreview {
    width:100%;
    min-with:90%;
}

JavaScript

function onBodyLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
    ko.applyBindings(myViewModel);
}

//GLOBAL ARRAY FOR DOCUMENTS CREATION AND EMAIL ATTACHMENT
var databaseArray = []; <!--CSV database parsed into json data here. Checkmarks correlate to data elements within this array and are pushed into th feedbackDocumentArray below. -->
var feedbackArray = []; <!--Selected comments are pushed to this global variable.-->

//KNOCKOUT DYNAMIC UI SCRIPT
var viewModel = {
    remark: ko.observableArray([{
        tab: "tab-1k",
        column: "tab-1K-column-1k",
        commentLabel: "tab-1K-column-1k-comment-1k",
        commentText: "Comment text for tab-1-column-1-comment-1."
    }, {
        tab: "tab-1k",
        column: "tab-1K-column-1k",
        commentLabel: "tab-1K-column-1k-comment-2k",
        commentText: "Comment text for tab-1-column-1-comment-2."
    }, {
        tab: "tab-2k",
        column: "tab-2K-column-1k",
        commentLabel: "tab-2K-column-1k-comment-1k",
        commentText: "Comment text for tab-2-column-1-comment-1."
    }, {
        tab: "tab-2k",
        column: "tab-2K-column-1k",
        commentLabel: "tab-2K-column-1k-comment-2k",
        commentText: "Comment text for tab-2-column-1-comment-2."
    }])
}
$('.tabList').ul();
$('.tab[data-role="controlgroup"]').input();
$('div[data-role="page"]').trigger('create');

//EXTERNAL NAVBAR SCRIPT
$(function () {
    $("[data-role='navbar']").navbar();
    $("[data-role='header'], [data-role='footer']").toolbar();
});
$(document).on("pagecontainershow", function () {
    var current = $(".ui-page-active").jqmData("title");
    $("[data-role='header'] h3").text(current);
    $("[data-role='navbar'] a.ui-btn-active").removeClass("ui-btn-active");
    $("[data-role='navbar'] a").each(function () {
        if ($(this).text() === current) {
            $(this).addClass("ui-btn-active");
        }
    });
}); <!--/external navbar script-->

//EXTERNAL INFO PANEL...