JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.mobile.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>






<div class="demo-section">
        <div id="drawer">
            <a href="#" data-target="DashBoard" class="drawer-link active">
                DashBoard
            </a>
            <a href="#" data-target="BioMarkers" class="drawer-link">BioMarkers</a>
            <a href="#" data-target="LifeStyle" class="drawer-link">LifeStyle</a>
            <a href="#" data-target="Settings" class="drawer-link">Settings</a>
        </div>

        <div id="content-container" >
            <a id="drawer-trigger" href="#" style="color:yellow;">click</a>

            <div id="DashBoard" class="inner-content" style="height: 100%;width:100%;padding:5px;">
                <h3>DashBoard</h3>
                <br />
                <div id="_steps">
                    <h4>Steps</h4>
                    <div id="steps" style="height: 80px; background-color: lightgray;"></div>
                </div>
                <br />
                <div id="_distance">
                    <h4>Distance</h4>
                    <div id="distance" style="height: 80px; background-color: lightgray;"></div>
                </div>
                <br />
                <div id="_calories">
                    <h4>Calories...

CSS

html, body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #select-period {
            margin: auto;
        }

        #content-container {
            height: 100%;
            background-color: #fcfcfc;
            padding-top: 10px;
        }

        .demo-section {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
            padding: 0;
        }

        #drawer-trigger {
            display: block;
            width: 36px;
            height: 36px;
            background-color: darkblue;
        }

        #drawer .km-widget {
            background-color: #212834;
            padding: 20px;
        }

        #drawer h3 {
            margin: 0 0 10px;
            padding: 0 0 10px 5px;
            color: #fff;
            border-bottom: 1px solid #454545;
        }

        #drawer a {
            display: block;
            text-decoration: none;
            color: #68baff;
            font-weight: bold;
            font-size: 1.1em;
            padding: 0 5px;
            height: 30px;
            line-height: 30px;
            vertical-align: middle;
            border-radius: 2px;
        }

        #drawer a:hover,
        #drawer a.active:hover {
            color: #212834;
            background-color: #68baff;
        }

        #drawer a.active {
            color: #45719a;
        }

        #drawer-trigger span {
            display: none;
        }

        .inner-content {
            color: #000;
        }

        .inner-content h3 {
            margin-bottom: 5px;
        }

        h4 {
            font-family:Arial;
            font-size:14px;
            color:darkslateblue;
        }
        h3 {
            font-family:Arial;
            font-size:15px;
            color:steelblue;
            text-align:center;
        }

JavaScript

var actData = [{ "ActivitySummaryKey": 145312, "id": "xxxxxx", "activityscore": -1, "activitycalories": 1640, "caloriesBMR": 1660, "caloriesOut": 2920, "distances": 6.66731071, "elevation": 42, "fairlyActiveminutes": 49, "floors": 14, "lightlyActiveMinutes": 178, "marginalCalories": 1167, "sedentaryMinutes": 554, "steps": 14544, "veryActiveMinutes": 102, "trackersteps": 0, "trackerdistances": 0, "trackerfloors": 0, "trackerelevation": 0, "trackerActivityCalories": 0, "trackerCaloriesOut": 0, "trackerMinutesSedentary": 0, "trackerminutesLightlyActive": 0, "trackerminutesFairlyActive": 0, "trackerminutesVeryActive": 0, "createddate": "8/9/2014 12:00:00 AM", "distanceunit": "Miles" }, { "ActivitySummaryKey": 145816, "id": "xxxxxx", "activityscore": -1, "activitycalories": 1541, "caloriesBMR": 1667, "caloriesOut": 2845, "distances": 6.30691528, "elevation": 100, "fairlyActiveminutes": 62, "floors": 33, "lightlyActiveMinutes": 159, "marginalCalories": 1087, "sedentaryMinutes": 709, "steps": 13756, "veryActiveMinutes": 92, "trackersteps": 0, "trackerdistances": 0, "trackerfloors": 0, "trackerelevation": 0, "trackerActivityCalories": 0, "trackerCaloriesOut": 0, "trackerMinutesSedentary": 0, "trackerminutesLightlyActive": 0, "trackerminutesFairlyActive": 0, "trackerminutesVeryActive": 0, "createddate": "8/11/2014 12:00:00 AM", "distanceunit": "Miles" }, { "ActivitySummaryKey": 146197, "id": "xxxxxx", "activityscore": -1, "activitycalories": 1436, "caloriesBMR": 1667, "caloriesOut": 2726, "distances": 4.977182, "elevation": 76, "fairlyActiveminutes": 88, "floors": 25, "lightlyActiveMinutes": 180, "marginalCalories": 966, "sedentaryMinutes": 699, "steps": 10857, "veryActiveMinutes": 56, "trackersteps": 0, "trackerdistances": 0, "trackerfloors": 0, "trackerelevation": 0, "trackerActivityCalories": 0, "trackerCaloriesOut": 0, "trackerMinutesSedentary": 0, "trackerminutesLightlyActive": 0, "trackerminutesFairlyActive": 0, "trackerminutesVeryActive": 0, "createddate":...