JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

CSS

ul {
    list-style-type: none;
    padding-left: 1em;
}

.pretty-key {
    color: red;
}

.pretty-value {
    color: blue;
    margin-left: 1em;
}

.pretty-key.pretty-depth-1 {
    color: black;
    font-size:larger;
}

.pretty-key.pretty-depth-2 {
    color: black;
}

.pretty-value.pretty-depth-2 {
    color: #555;
}

.pretty-key.pretty-depth-3 {
    color: darkred;
}

.pretty-value.pretty-depth-3 {
    color: darkblue;
}

JavaScript

var obj1 = {
    "assessment": {
        "other_pmh": "",
        "moi": "n/a",
        "pt_status_on_arrival": "alert x 3",
        "vitals": [
            {
                "date_time": "2013-07-08T18:18:57.880Z",
                "bp": "120/86",
                "pulse": 86,
                "resp": 16,
                "o2_sat": 97,
                "ekg": "n/a",
                "_id": "51db00b0576762183900000d"
            },
            {
                "date_time": "2013-07-08T18:09:57.000Z",
                "bp": "120/88",
                "pulse": 82,
                "resp": 12,
                "o2_sat": 98,
                "ekg": "n/a",
                "_id": "51db00b0576762183900000c"
            }
        ],
        "physical": {
            "cap_refill": "normal",
            "head": "normal",
            "chest": "muscular",
            "abdomen": "6 pack",
            "pelvis": "elvis",
            "extremeties": "extreme",
            "back_spine": "normal",
            "eyes": {
                "left": 2,
                "right": 2,
                "status": [
                    "PERL"
                ]
            },
            "skin": [
                "pale",
                "cool"
            ],
            "lungs": [
                "clear"
            ],
            "breathing": [
                "normal"
            ]
        },
        "pt_meds": [
            "vitamins",
            "bp bmedicine",
            "awesome pills",
            "vicadin",
            "zanax
        ],
        "trauma_alert": false,
        "pmh": [
            "HTN",
            "Awesomness"
        ]
    }
};

var theTypeOf = Function.call.bind(Object.prototype.toString);

function deCamelCase (str) { 
    return str.replace(/_/g, ' ').replace(/\b(\w)/g, function (a, b) {
        return b.toUpperCase();
    });
}

function makeKeyElement (key, depth) { 
    var keyEl = document.createElement('span');

    keyEl.className = 'pretty-key pretty-depth-' + depth;
   ...