JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div id="container">
  
  </div>

CSS

#container {
            width: 960px;
        }

JavaScript

var pd = {
    "uuid": "42a00937-5223-4689-adeb-ca0a4ab854c7",
    "entryMethod": "same_amount",
    "entryPeriod": "monthly",
    "name": "Dave O'Connor",
    "personnelType": "employee",
    "startMonth": 0,
    "startYear": 0,
    "baseSalary": 0,
    "payrollYears": [
        {
            "currentResolution": "month",
            "values": [
                8355,
                2460,
                6350,
                3460,
                2572,
                7373,
                1278,
                9524,
                3693,
                2573,
                1373,
                2368
            ]
        },
        {
            "currentResolution": "month",
            "values": [
                8888
            ]
        },
        {
            "currentResolution": "month",
            "values": [
                9999
            ]
        }
    ]
};

    var personnelData = {'persons': [pd, pd, pd]};
    
    var plan = {
        planName: "Garret's Bike Shop",
        role: "root"
    };
    
    // Simple Financial Year type
    var FinancialYearValues = function (argValues) {
        var values = argValues;
        
        this.length = values.length;
        this.getPeriods = function () {
            return values;
        };
        this.setPeriods = function (argValues) {
            values = argValues;
        };
    };
    
    // Adapter to tell Ext models how to deal with the FinancialYearValues type
    // basically says- don't do anything fancy with it.
    Ext.data.Types.FINANCIALYEARVALUES = {
        convert: function (v, data) {
            return new FinancialYearValues(v);
        },
        sortType: function(v) {
            return v;
        },
        type: 'FinancialYearValues'
    };    

    // simple FinancialYear model. This will be a child of Personnel et al. 
    // Stores any number of FinancialYearValues objects.
    Ext.define("FinancialYear", {
        extend: 'Ext.data.Model',
        fields: [
      ...