JSFiddle - React, Tailwind, and code Playground

CSS

#toc-tableOfContents
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
}

#toc-entriesContainer
{
    position: absolute;
    display: block;
    top: 50px;
    left: 0;
    right: 0;
}

#toc-entries
{
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
}

.toc-entry
{
    position: relative;
    display: block;
    height: 100%;
    -webkit-user-select: none;
    opacity: 1;
}

.toc-entry article
{
    display: block;
    height: 100%;
}

#toc-tableOfContents #toc-entriesContainer
{
    opacity: 1;
}

#toc-tableOfContents.toc-sectionChanging #toc-entriesContainer
{
}

#toc-header
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #005c76;
    background-color: black;
    background-color: #ddd;
    background-color: #0b0b0b;
    z-index: 200;
    border-bottom: 1px solid rgba(180,180,180,.1);
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,.3);
    -webkit-box-sizing: border-box;
}

#toc-tableOfContents.toc-logoOnLight #toc-header
{
    background-color: #f8f8f8;
}

#toc-tableOfContents.toc-logoOnAccent #toc-header
{
    background-color: @accentColor;
}

#toc-header:after
{
    content: '';
    z-index: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.1)), color-stop(40%,rgba(255,255,255,.06)),color-stop(100%,rgba(255,255,255,0)));
}

#toc-pubName
{
    position: relative;
    z-index: 2;
    width: 65%;
    text-align: center;
    color: white;
    font-size: 28px;
    margin: 12px auto 0 auto;
    height: auto;
}

.toc-noLogo
{
    margin-top: 2px;
    font-family: helvetica neue;
    font-weight: light;
}

#toc-logo
{
    position: relative;
    height: auto;
    width: auto;
    max-height: 25px;
    max-width: 100%;
    margin:...