JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<link rel="stylesheet" href="http://dev.gpcontent.com/global-includes/css/bootstrap.css">
<link rel="stylesheet" href="http://dev.graphicproducts.com/styles/default.css">
<div class="span3 articleIndexMenu">
    <ul class="bRight" id="menu"></ul>
</div>
<div class="span9 articleIndex"></div>

CSS

.stuck {
    position: fixed;
    top: 20px;
}
.articleIndexMenu ul {
    list-style-type: none;
    margin-left: 0;
}
.articleIndexMenu li {
    font-size: 1.2rem;
    line-height: normal;
    padding-left: 30px;
    margin-bottom: 10px;
}
.articleIndexMenu a {
    color: #484848;
}
.articleIndexMenu a:hover {
    color: #fd7800;
    text-decoration: none;
}
.articleIndex h1 {
    color: #484848;
    border-bottom: 3px solid #fd7800;
    margin: 0 0 0 55px;
    line-height: 2.5rem;
}
.articleList ul {
    list-style-type: none;
}
.articleList li {
    margin-bottom: 5px;
}
.articleList li a:link, .articleList li a:visited, .articleList li a:active {
    color: #fd7800;
    font-size: .9rem;
}
.articleList li a:hover {
    color: #484848;
    text-decoration: none;
}
.articleList ul li ul {
    margin:0;
}
.articleIndexFooters {
    text-align: center;
    border-top: 1px solid #cccccc;
    color: #cccccc;
    margin: 0 20px;
    padding: 5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}
.articleIndexFooters:hover {
    border-top: 1px solid #484848;
    color: #484848;
}
.hiddenArticleList {
    display:none;
}
.showHide {
    font-size: .8rem;
    margin: 0 auto;
    width: 50%;
    display: none;
}
.showHide .show {
    display: block;
}
.showHide .hide {
    display: none;
}
.theEnd {
    clear: both;
}
.fives {
    background: url(images/article-icons/5s.png) left no-repeat;
    background-size: contain;
}
.arcFlash {
    background: url(images/article-icons/arc-flash.png) left no-repeat;
    background-size: contain;
}
.electrical {
    background: url(images/article-icons/electrical.png) left no-repeat;
    background-size: contain;
}
.floorMarking {
    background: url(images/article-icons/floor-marking.png) left no-repeat;
    background-size: contain;
}
.ghs {
    background: url(images/article-icons/ghs.png) left no-repeat;
    background-size: contain;
}
.hazardousMaterials {
    background:...

JavaScript

var gpArticlesMenu = {
    items: [{
        class: "leanManufacturing",
        href: "#lean",
        text: "Lean Manufacturing"
    }, {
        class: "mLeft fives",
        href: "#5S",
        text: "5S"
    }, {
        class: "mLeft kanban",
        href: "#kanban",
        text: "Kanban"
    }, {
        class: "mLeft kaizen",
        href: "#kaizen",
        text: "Kaizen"
    }, {
        class: "mLeft tpm",
        href: "#tpm",
        text: "TPM"
    }, {
        class: "pipeMarking",
        href: "#pipe",
        text: "Pipe Marking"
    }, {
        class: "arcFlash",
        href: "#arc",
        text: "Arc Flash"
    }, {
        class: "electrical",
        href: "#electrical",
        text: "Electrical"
    }, {
        class: "floorMarking",
        href: "#floor",
        text: "Floor Marking"
    }, {
        class: "ghs",
        href: "#ghs",
        text: "GHS"
    }, {
        class: "hazardousMaterials",
        href: "#hazard",
        text: "Hazardous Materials"
    }, {
        class: "nfpa",
        href: "#nfpa",
        text: "NFPA"
    }, {
        class: "ppe",
        href: "#ppe",
        text: "PPE"
    }, {
        class: "safetySigns",
        href: "#signs",
        text: "Safety Signs"
    }, {
        class: "industrialSafety",
        href: "#industrial",
        text: "Industrial Safety"
    }, {
        class: "osha",
        href: "#osha",
        text: "OSHA"
    }]

};

var gpArticles = [{
    category: "Lean Manufacturing",
    articles: [{
        text: "What is Lean Manufacturing ? ",
        link: "http://www.graphicproducts.com/tutorials/lean-manufacturing/"
    }, {
        text: "What is Asset Management?",
        link: "http://www.graphicproducts.com/articles/what-is-asset-management.php"
    }, {
        text: "Visual Communication",
        link: "http://www.graphicproducts.com/articles/visual-communication.php"
    }]
}, {
    category: "5S",
    articles: [{
        text: "What is Five S?",
       ...