JSFiddle - React, Tailwind, and code Playground

by Seng Tat Pan

CSS

/* SUPER WRAPPER */
 div.wrapper {
    min-width: 640px;
}
/* NAVIGATION BAR */
 table.navbar {
    position: fixed;
    border-bottom: 1.5px solid #48FC28;
    background: #000000;
    top: 0;
    left: 0;
    z-index: 2000;
    min-width: 640px;
    width: 1760px;
    width: 100%;
    min-height: 50px;
    height: 85px;
    font-family:"Razer";
}
td.navbarMainTD {
    float: middle;
    margin: 1px;
    min-width: 200px;
}
table.navbarLogo {
    top: 10px;
    left: 10px;
}
img.navbarLogo {
    width: 68px;
    height: 62px;
}
td.navbarLogo_text {
    text-align: left;
    font-family:"Razer";
    font-size: 0.93em;
    color: #66FF33;
}
table.navbarTable {
    position: relative;
    table-layout: fixed;
    padding: 0.8%;
    top: 2.31%;
    /* left: 28.39%; */
    width: 672px;
    margin-left: 0px;
    /* background-color: #000000; */
    border-collapse: collapse;
    border: 1px solid #66FF33;
    text-align: center;
    font-family:"Razer";
    font-size: 0.93em;
    color: #FFFFFF;
}
td.navbarTD {
    font-size: 0.8em;
    width: 25%;
}
/* NAVIGATION BAR LOG IN */
 form.login {
    /* position: fixed; */
    /* top: 5px; */
    /* left: 5px; */
}
table.navbarLogin {
    position: relative;
    table-layout: fixed;
    min-width: 336px;
    min-height: 80px;
}
table.navbarLoginUsername {
    position: relative;
    /* fixed */
    table-layout: fixed;
    /* top: 1%;  8px */
    /* left: 70%;  1500px */
    height: 30;
    width: 295;
    background-color: #000000;
    font-family:"Razer";
    font-size: 0.8em;
    color: #FFFFFF;
}
table.navbarLoginPw {
    position: relative;
    /* fixed */
    table-layout: fixed;
    /* top: 5%; 40px */
    /* left: 70%; 1500px */
    height: 30;
    width: 295;
    background-color: #000000;
    font-family:"Razer";
    font-size: 0.8em;
    color: #FFFFFF;
}
label.rememberme {
    position: relative;
    /* fixed */
    font-family:"Razer";
    font-size: 0.8em;
    /* left: 89%; 1760px */
    /* top: 1.389%; 15px...

JavaScript

var jsRank_rankAdmin = 665;
var jsRank_rankEngr = 666;
var jsRank_rankOutsource = 667;

var editor; // use a global for the submit and return data rendering in the examples

(function ($) {
    $(document).ready(function () {
        var curr_rank = document.getElementById('srank').value;
        //---Admin---//
        if (curr_rank <= jsRank_rankEngr) {
            editor = new $.fn.dataTable.Editor({
                ajax: "php/TRRecordManHrsEditor.php",
                table: "#TRrecordmanhrs",
                fields: [{
                    label: "Test Environment: ",
                    name: "TestEnvironment.Name",
                    type: "hidden"
                }, {
                    label: "Actual Date: ",
                    name: "TestRequestActualSchedule.ActualDate",
                    type: "date"
                }, {
                    label: "Actual Man Hours (Normal): ",
                    name: "TestRequestActualSchedule.ManHrsNM"
                }, {
                    label: "Actual Man Hours (OT - Wkday/Sat): ",
                    name: "TestRequestActualSchedule.ManHrsOT"
                }, {
                    label: "Actual Man Hours (OT - Sun/PH): ",
                    name: "TestRequestActualSchedule.ManHrsOTSunPH"
                }, {
                    label: "Scheduled Man Hours (Normal): ",
                    name: "TestRequestPlannedSchedule.ScheduledManHrsNM",
                    type: "hidden"
                }, {
                    label: "Scheduled Man Hours (OT - Wkday/Sat): ",
                    name: "TestRequestPlannedSchedule.ScheduledManHrsOT",
                    type: "hidden"
                }, {
                    label: "Scheduled Man Hours (OT - Sun/PH): ",
                    name: "TestRequestPlannedSchedule.ScheduledManHrsOTSunPH",
                    type: "hidden"
                }, {
                    label: "Status: ",
                    name: "TestRequestMain.Status",
                   ...