JSFiddle - React, Tailwind, and code Playground

HTML

<div>
      <div id="header">
        <h1 id="title" >3 X 3 X 3</h1>
        
        <div id="options">    
          <ul>
            <li id="player1" class="select">
              <div class="select">Human</div>
              <ul>
                <li class="option">Human</li>
                <li class="option">Computer</li>
              </ul>
            </li>
          </ul>
          <ul>
            <li id="player2" class="select">
              <div class="select">Computer</div>
              <ul>
                <li class="option">Human</li>
                <li class="option">Computer</li>
              </ul>
            </li>
          </ul>          
        </div>
      </div>      
      
      <div id="board">
        <div class="row">
          <div class="tile" boardx="0" boardy="0" boardz="2"></div>
          <div class="tile" boardx="1" boardy="0" boardz="2"></div>
          <div class="tile" boardx="2" boardy="0" boardz="2"></div>
        </div>
        <div class="row">
          <div class="tile" boardx="0" boardy="1" boardz="2"></div>
          <div class="tile" boardx="1" boardy="1" boardz="2"></div>
          <div class="tile" boardx="2" boardy="1" boardz="2"></div>
        </div>
        <div class="row">
          <div class="tile" boardx="0" boardy="2" boardz="2"></div>
          <div class="tile" boardx="1" boardy="2" boardz="2"></div>
          <div class="tile" boardx="2" boardy="2" boardz="2"></div>
        </div>
      </div>
      
      <div class="spaceRow">
        <div class="row">
          <div class="tile" boardx="0" boardy="0" boardz="1"></div>
          <div class="tile" boardx="1" boardy="0" boardz="1"></div>
          <div class="tile" boardx="2" boardy="0" boardz="1"></div>
        </div>
        <div class="row">
          <div class="tile" boardx="0" boardy="1" boardz="1"></div>
          <div class="tile" boardx="1" boardy="1" boardz="1"></div>
          <div class="tile" boardx="2" boardy="1" boardz="1"></div>
    ...

CSS

.spaceRow {
        clear: both;
        padding-top: 40px;
      }
    
      .row {
        clear: both;
      }
      
      .tile, .space { 
        position: relative; height: 40px; width: 40px;
        float: left; margin: 1px 1px; white-space: nowrap;
        line-height: 40px;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px; 
      }      
      .tile { background: grey; } 
      .space { background: white; }
      .R { background: #F00000; }
      .B { background: #0000CC; }
      
      #header { 
        border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
        background: #C8C8C8;
        color: #FFFFFF; 
        width: 600px;
        height: 41px;
      }      
      #title { padding: 2px 2px 2px 15px; font-size: 32px; font-weight: bold; }
      #options { position: relative; margin-top: -51px; margin-left: 360px; }  
      #board { margin-top: 40px; }               
      
      canvas {
        margin-top: -450px;
        margin-left: 50px;
      }
      
      ul {
        padding: 0;
        margin: 0;
        list-style: none;
        }
      
      li {
        float: left;
        position: relative;
        width: 100px;
        }
      
      li ul {
        display: none;
        position: absolute; 
        top: 1em;
        left: 0;
        }
      
      li > ul {
          top: auto;
          left: auto;
          }
      
      li:hover ul { display: block; }
      
      ul, p { font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;; font-size: 12px; }
              
      li.select { margin-top: 20px; }
      li.select, li.select > ul { 
          /*background: #D8D8D8;*/
          background: #FFFFFF;
          border: 1px solid #B8B8B8;
      }
      li#player1 { border-right: 8px solid #F00000; }
      li#player2 { border-right: 8px solid #0000CC; margin-left: 10px; }
      
      div.select { margin-left: 5px;...

JavaScript

var paths = [];      
      
      // Everything in the bottom level (z=0)
      paths[0] = [[0,0,0],[1,0,0],[2,0,0]];
      paths[1] = [[0,1,0],[1,1,0],[2,1,0]];
      paths[2] = [[0,2,0],[1,2,0],[2,2,0]];
      paths[3] = [[0,0,0],[0,1,0],[0,2,0]];
      paths[4] = [[1,0,0],[1,1,0],[1,2,0]];
      paths[5] = [[2,0,0],[2,1,0],[2,2,0]];
      paths[6] = [[0,0,0],[1,1,0],[2,2,0]];
      paths[7] = [[2,0,0],[1,1,0],[0,2,0]];
      
      // Everything in the middle level (z=1)
      paths[8] = [[0,0,1],[1,0,1],[2,0,1]];
      paths[9] = [[0,1,1],[1,1,1],[2,1,1]];
      paths[10] = [[0,2,1],[1,2,1],[2,2,1]];
      paths[11] = [[0,0,1],[0,1,1],[0,2,1]];
      paths[12] = [[1,0,1],[1,1,1],[1,2,1]];
      paths[13] = [[2,0,1],[2,1,1],[2,2,1]];
      paths[14] = [[0,0,1],[1,1,1],[2,2,1]];
      paths[15] = [[2,0,1],[1,1,1],[0,2,1]];
      
      // Everything in the top layer (z=2)
      paths[16] = [[0,0,2],[1,0,2],[2,0,2]];
      paths[17] = [[0,1,2],[1,1,2],[2,1,2]];
      paths[18] = [[0,2,2],[1,2,2],[2,2,2]];
      paths[19] = [[0,0,2],[0,1,2],[0,2,2]];
      paths[20] = [[1,0,2],[1,1,2],[1,2,2]];
      paths[21] = [[2,0,2],[2,1,2],[2,2,2]];
      paths[22] = [[0,0,2],[1,1,2],[2,2,2]];
      paths[23] = [[2,0,2],[1,1,2],[0,2,2]];
      
      // All the straight columns
      paths[24] = [[0,0,0],[0,0,1],[0,0,2]];
      paths[25] = [[1,0,0],[1,0,1],[1,0,2]];
      paths[26] = [[2,0,0],[2,0,1],[2,0,2]];     
      paths[27] = [[0,1,0],[0,1,1],[0,1,2]];
      paths[28] = [[1,1,0],[1,1,1],[1,1,2]];
      paths[29] = [[2,1,0],[2,1,1],[2,1,2]];      
      paths[30] = [[0,2,0],[0,2,1],[0,2,2]];
      paths[31] = [[1,2,0],[1,2,1],[1,2,2]];
      paths[32] = [[2,2,0],[2,2,1],[2,2,2]];
      
      // All the diagonal columns - back to front
      paths[33] = [[0,0,0],[0,1,1],[0,2,2]];
      paths[34] = [[1,0,0],[1,1,1],[1,2,2]];
      paths[35] = [[2,0,0],[2,1,1],[2,2,2]];
      
      // All the diagonal columns - front to back
      paths[36] =...