JSFiddle - React, Tailwind, and code Playground

by carsont

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<body>
    <div class="site-rim"></div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div id="timeline">Incoming Trains</div>
            <table id="train-tracks">Train Name</table>
            <table id="yard-tracks">Yard</table>
        </div>
    </div>
</body>

CSS

. track {
}
.outer-container {
}
/* ------------------
 styling for the tables 
   ------------------   */
 td {
    padding: 8px;
}

. site-rim {
    border : 5px solid #f89406;
}

JavaScript

var columnTemplate = '<td class="tooltipA" title="{0}" backgroundColor="{1}"></td>';

var tracks = [{
    'col1': '1',
        'col2': 'CP',
        'col3': '84',
        'col4': '',
        'col5': 'CPRS - ALYTH'
}, {
    'col1': '2',
        'col2': 'CP',
        'col3': '70',
        'col4': '',
        'col5': 'CPRS - ALYTH'
}, {
    'col1': '3',
        'col2': 'CP',
        'col3': '1',
        'col4': '',
        'col5': 'CPRS - ALYTH'
}, {
    'col1': '4',
        'col2': 'CP',
        'col3': '2',
        'col4': '',
        'col5': 'CPRS - ALYTH'
}, {
    'col1': '5',
        'col2': 'CP',
        'col3': '74',
        'col4': '',
        'col5': 'CPRS - ALYTH'
}, {
    'col1': '6',
        'col2': 'CP',
        'col3': '78',
        'col4': 'N35',
        'col5': 'CPRS - ALYTH'
}, {
    'col1': '7',
        'col2': 'CP',
        'col3': '95',
        'col4': 'N35',
        'col5': 'CPRS - ALYTH'
}, {
    'col1': '8',
        'col2': 'CP',
        'col3': '96',
        'col4': 'N35',
        'col5': 'CPRS - ALYTH'
}];

var classColors = {
    '6300MA1': 'Bisque',
        'VT12': 'CadetBlue',
        'NR3': 'Coral',
        '018': 'CornflowerBlue',
        'T40CB': 'Crimson',
        'N34AIRB': 'DarkBlue',
        '8285MA1': 'DarkKhaki',
        'CARMGMT': 'DarkSlateBlue',
        'HOLD': 'Red',
        '8285MA1': 'Gold',
        '8526MA1': 'Indigo',
        'CNCALGY': 'Ivory',
        'L14PRES': 'LightBlue',
        '7330MA1': 'LightSlateGrey',
        '9508MA1': 'Magenta',
        '9720FA1': 'Olive',
        '9684MA1': 'Orange',
        '9700ALA': 'PaleVioletRed',
        '9684MA1': 'Plum',
        'Q02PRIV': 'SeaGreen',
        'Q06': 'Silver',
        'B21': 'Teal',
        'B36ETNK': 'Tomato',
        'B36EHOP': 'Lavender',
        'NR3': 'Yellow',
        'N35': 'Chocolate',
        'N37': 'DeepPink',
        'B38': 'Salmon',
        '4850MA1': 'PeachPuff',
        'R2860': 'SpringGreen',
        '9700VIA': 'Purple',
        'O20BI': 'Peru',
      ...