JSFiddle - React, Tailwind, and code Playground

by cvoll

HTML

<div class="container">
    <canvas class="canvas" id="canvas"></canvas>
    <div class="boxes boxes1"></div>
    <div class="boxes boxes2"></div>
    <div class="boxes boxes3"></div>
    <div class="boxes boxes4"></div>
    <div class="boxes boxes5"></div>
</div>

CSS

html, body, .container {
    height: 100%;
    margin: 0;
}
.canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.boxes {
    display: flex;
    justify-content: center;
    height: 15%;
    margin: 0 0 5%;
    position: relative;
    z-index: 1;
}
.box {
    flex: 0 1 auto;
    height: 100%;
    width: 1.5625%;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.name {
    display: none;
    transform: rotate(-90deg);
    width: 200px;
    text-align: center;
    color: #FFF;
    font: 600 12px Helvetica Neue, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex: 1 1 auto;
}
.box:hover {
    width: 80px;
}
.box:hover .name {
    display: block;
}

JavaScript

var teams = {
    'kentucky'         : '084D92',
    'hampton'          : '00216E',
    'cincinnati'       : 'DC251D',
    'purdue'           : 'D4A10E',
    'w-virginia'       : 'E9A611',
    'buffalo'          : '003399',
    'maryland'         : 'FF2952',
    'valparaiso'       : '613318',
    'butler'           : '010066',
    'texas'            : 'D26B20',
    'notre-dame'       : '002B5B',
    'northeastern'     : 'CC0000',
    'wichita-st'       : 'FEC02D',
    'indiana'          : 'AA2D3F',
    'kansas'           : '0018A8',
    'new-mexico-st'    : '882345',
    'wisconsin'        : 'C11F37',
    'coastal-carolina' : '007E84',
    'oregon'           : '004A00',
    'oklahoma-st'      : 'F3791F',
    'arkansas'         : 'C41E3A',
    'wofford'          : 'CFB53B',
    'north-carolina'   : '94C2E4',
    'harvard'          : 'DC143C',
    'xavier'           : '00295D',
    'mississippi'      : '002B7F',
    'baylor'           : '004834',
    'georgia-st'       : '003399',
    'vcu'              : '000000',
    'ohio-st'          : 'AD0F20',
    'arizona'          : 'C21A34',
    'texas-southern'   : '800000',
    'villanova'        : '003E7E',
    'lafayette'        : 'E34234',
    'nc-state'         : 'FD0C2D',
    'lsu'              : '461D7C',
    'uni'              : '660099',
    'wyoming'          : '492F24',
    'louisville'       : 'DF1926',
    'uc-irvine'        : '002244',
    'providence'       : '000000',
    'dayton'           : 'FF0000',
    'oklahoma'         : 'A81E2E',
    'albany'           : '452663',
    'michigan-st'      : '016A42',
    'georgia'          : 'FF0000',
    'virginia'         : 'F36127',
    'belmont'          : '002469',
    'duke'             : '034FA3',
    'robert-morris'    : '14234B',
    'san-diego-st'     : 'C43E3F',
    'st-johns'         : 'D31045',
    'utah'             : 'CC0000',
    'stephen-f-austin' : '330066',
    'georgetown'       : '002147',
    'e-washington'     : 'A10022',
    'smu'             ...