JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="x-ua-compatible" content="IE=edge"/>
<title>Profile report</title>
<link href="css/base-style.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="js/report.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<h1>Profile report</h1>
<div id="header">
<p>Profiled build: build </p>
<p>Started on: 2014/12/09 - 12:24:23</p>
</div>
<div id="tabs">
<ul class="tabLinks">
<li>
<a href="#tab0">Summary</a>
</li>
<li>
<a href="#tab1">Configuration</a>
</li>
<li>
<a href="#tab2">Dependency Resolution</a>
</li>
<li>
<a href="#tab3">Task Execution</a>
</li>
</ul>
<div class="tab" id="tab0">
<h2>Summary</h2>
<table>
<thead>
<tr>
<th>Description</th>
<th class="numeric">Duration</th>
</tr>
</thead>
<tr>
<td>Total Build Time</td>
<td class="numeric">8m44.29s</td>
</tr>
<tr>
<td>Startup</td>
<td class="numeric">1.813s</td>
</tr>
<tr>
<td>Settings and BuildSrc</td>
<td class="numeric">0.038s</td>
</tr>
<tr>
<td>Loading Projects</td>
<td class="numeric">0.009s</td>
</tr>
<tr>
<td>Configuring Projects</td>
<td class="numeric">5.889s</td>
</tr>
<tr>
<td>Task Execution</td>
<td class="numeric">6m32.28s</td>
</tr>
</table>
</div>
<div class="tab" id="tab1">
<h2>Configuration</h2>
<table>
<thead>
<tr>
<th>Project</th>
<th class="numeric">Duration</th>
</tr>
</thead>
<tr>
<td>All projects</td>
<td class="numeric">5.889s</td>
</tr>
<tr>
<td>:app</td>
<td class="numeric">5.607s</td>
</tr>
<tr>
<td>:</td>
<td class="numeric">0.157s</td>
</tr>
<tr>
<td>:facebook</td>
<td class="numeric">0.086s</td>
</tr>
<tr>
<td>:insiteo</td>
<td class="numeric">0.039s</td>
</tr>
</table>
</div>
<div class="tab" id="tab2">
<h2>Dependency Resolution</h2>
<table>
<thead>
<tr>
<th>Dependencies</th>
<th class="numeric">Duration</th>
</tr>
</thead>
<tr>
<td>All dependencies</td>
<td...

CSS

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 12pt;
}

body, a, a:visited {
    color: #303030;
}

#content {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
}

#content h1 {
    font-size: 160%;
    margin-bottom: 10px;
}

#footer {
    margin-top: 100px;
    font-size: 80%;
    white-space: nowrap;
}

#footer, #footer a {
    color: #a0a0a0;
}

ul {
    margin-left: 0;
}

h1, h2, h3 {
    white-space: nowrap;
}

h2 {
    font-size: 120%;
}

ul.tabLinks {
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow: auto;
    min-width: 800px;
    width: auto !important;
    width: 800px;
}

ul.tabLinks li {
    float: left;
    height: 100%;
    list-style: none;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 0;
    -moz-border-radius: 7px;
    border-radius: 7px;
    margin-right: 25px;
    border: solid 1px #d4d4d4;
    background-color: #f0f0f0;
}

ul.tabLinks li:hover {
    background-color: #fafafa;
}

ul.tabLinks li.selected {
    background-color: #c5f0f5;
    border-color: #c5f0f5;
}

ul.tabLinks a {
    font-size: 120%;
    display: block;
    outline: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

ul.tabLinks li h2 {
    margin: 0;
    padding: 0;
}

div.tab {
}

div.selected {
    display: block;
}

div.deselected {
    display: none;
}

div.tab table {
    min-width: 350px;
    width: auto !important;
    width: 350px;
    border-collapse: collapse;
}

div.tab th, div.tab table {
    border-bottom: solid #d0d0d0 1px;
}

div.tab th {
    text-align: left;
    white-space: nowrap;
    padding-left: 6em;
}

div.tab th:first-child {
    padding-left: 0;
}

div.tab td {
    white-space: nowrap;
    padding-left: 6em;
    padding-top: 5px;
    padding-bottom: 5px;
}

div.tab td:first-child {
    padding-left: 0;
}

div.tab td.numeric, div.tab th.numeric {
   ...

JavaScript

var tabs = new Object();

function initTabs() {
    var container = document.getElementById('tabs');
    tabs.tabs = findTabs(container);
    tabs.titles = findTitles(tabs.tabs);
    tabs.headers = findHeaders(container);
    tabs.select = select;
    tabs.deselectAll = deselectAll;
    tabs.select(0);
    return true;
}

window.onload = initTabs;

function switchTab() {
    var id = this.id.substr(1);
    for (var i = 0; i < tabs.tabs.length; i++) {
        if (tabs.tabs[i].id == id) {
            tabs.select(i);
            break;
        }
    }
    return false;
}

function select(i) {
    this.deselectAll();
    changeElementClass(this.tabs[i], 'tab selected');
    changeElementClass(this.headers[i], 'selected');
    while (this.headers[i].firstChild) {
        this.headers[i].removeChild(this.headers[i].firstChild);
    }
    var h2 = document.createElement('H2');
    h2.appendChild(document.createTextNode(this.titles[i]));
    this.headers[i].appendChild(h2);
}

function deselectAll() {
    for (var i = 0; i < this.tabs.length; i++) {
        changeElementClass(this.tabs[i], 'tab deselected');
        changeElementClass(this.headers[i], 'deselected');
        while (this.headers[i].firstChild) {
            this.headers[i].removeChild(this.headers[i].firstChild);
        }
        var a = document.createElement('A');
        a.setAttribute('id', 'ltab' + i);
        a.setAttribute('href', '#tab' + i);
        a.onclick = switchTab;
        a.appendChild(document.createTextNode(this.titles[i]));
        this.headers[i].appendChild(a);
    }
}

function changeElementClass(element, classValue) {
    if (element.getAttribute('className')) {
        /* IE */
        element.setAttribute('className', classValue)
    } else {
        element.setAttribute('class', classValue)
    }
}

function findTabs(container) {
    return findChildElements(container, 'DIV', 'tab');
}

function findHeaders(container) {
    var owner = findChildElements(container, 'UL',...