JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="person-grid">
  <div class="col" id="col1">
    <div class="cell" cell-id="1"></div>
    <div class="cell" cell-id="2"></div>
    <div class="cell" cell-id="3"></div>
    <div class="cell" cell-id="4"></div>
    <div class="cell" cell-id="5"></div>
    <div class="cell" cell-id="6"></div>
    <div class="cell" cell-id="7"></div>
    <div class="cell" cell-id="8"></div>
    <div class="cell" cell-id="9"></div>
    <div class="cell" cell-id="10"></div>
    <div class="cell" cell-id="11"></div>
    <div class="cell" cell-id="12"></div>
  </div>
  <div class="col" id="col2">
    <div class="cell" cell-id="1"></div>
    <div class="cell" cell-id="2"></div>
    <div class="cell" cell-id="3"></div>
    <div class="cell" cell-id="4"></div>
    <div class="cell" cell-id="5"></div>
    <div class="cell" cell-id="6"></div>
    <div class="cell" cell-id="7"></div>
    <div class="cell" cell-id="8"></div>
    <div class="cell" cell-id="9"></div>
    <div class="cell" cell-id="10"></div>
    <div class="cell" cell-id="11"></div>
    <div class="cell" cell-id="12"></div>
  </div>
  <div class="col" id="col3">
    <div class="cell" cell-id="1"></div>
    <div class="cell" cell-id="2"></div>
    <div class="cell" cell-id="3"></div>
    <div class="cell" cell-id="4"></div>
    <div class="cell" cell-id="5"></div>
    <div class="cell" cell-id="6"></div>
    <div class="cell" cell-id="7"></div>
    <div class="cell" cell-id="8"></div>
    <div class="cell" cell-id="9"></div>
    <div class="cell" cell-id="10"></div>
    <div class="cell" cell-id="11"></div>
    <div class="cell" cell-id="12"></div>
  </div>
  <div class="col" id="col4">
    <div class="cell" cell-id="1"></div>
    <div class="cell" cell-id="2"></div>
    <div class="cell" cell-id="3"></div>
    <div class="cell" cell-id="4"></div>
    <div class="cell" cell-id="5"></div>
    <div class="cell" cell-id="6"></div>
    <div class="cell" cell-id="7"></div>
    <div class="cell" cell-id="8"></div>
    <div...

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

$size: 200px;
$grid: 12;
$cell_size: $size/$grid;

.person-grid {
  display: flex;
  width: $size;
  height: $size;
  
  .col {
    width: $cell_size;
    height: $size;
  }
  
  .cell{
    width: $cell_size;
    height: $cell_size;
    /* border: solid 1px silver; */
    box-sizing: border-box;
    /* animation-timing-function: cubic-bezier(0, 0, 0, 0.95); */
    animation-name: fade;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    transform: scale(0);
    
    &.picked{
      background: blue;
    }
  }
}

#col6 .cell[cell-id="1"],
#col6 .cell[cell-id="2"],
#col6 .cell[cell-id="3"],
#col6 .cell[cell-id="5"],
#col6 .cell[cell-id="4"],
#col6 .cell[cell-id="6"],
#col6 .cell[cell-id="7"],
#col6 .cell[cell-id="8"],
#col6 .cell[cell-id="9"],
#col6 .cell[cell-id="10"],
#col6 .cell[cell-id="11"],
#col6 .cell[cell-id="11"],
#col6 .cell[cell-id="12"],
#col6 .cell[cell-id="12"],
#col6 .cell[cell-id="12"],
#col6 .cell[cell-id="11"],
#col5 .cell[cell-id="12"],
#col5 .cell[cell-id="11"],
#col5 .cell[cell-id="10"],
#col5 .cell[cell-id="9"],
#col5 .cell[cell-id="9"],
#col5 .cell[cell-id="7"],
#col5 .cell[cell-id="8"],
#col5 .cell[cell-id="9"],
#col5 .cell[cell-id="5"],
#col5 .cell[cell-id="4"],
#col5 .cell[cell-id="3"],
#col5 .cell[cell-id="2"],
#col4 .cell[cell-id="8"],
#col4 .cell[cell-id="9"],
#col4 .cell[cell-id="10"],
#col4 .cell[cell-id="12"],
#col4 .cell[cell-id="11"],
#col3 .cell[cell-id="8"],
#col3 .cell[cell-id="9"],
#col3 .cell[cell-id="10"],
#col3 .cell[cell-id="10"],
#col3 .cell[cell-id="11"],
#col3 .cell[cell-id="12"],
#col3 .cell[cell-id="10"],
#col2 .cell[cell-id="9"],
#col2 .cell[cell-id="10"],
#col2 .cell[cell-id="11"],
#col7 .cell[cell-id="1"],
#col7 .cell[cell-id="2"],
#col7 .cell[cell-id="3"],
#col7 .cell[cell-id="4"],
#col7 .cell[cell-id="6"],
#col7 .cell[cell-id="7"],
#col7 .cell[cell-id="5"],
#col7...

Babel + JSX

let checked = [];

$('.cell').click(function(){
  const $parent = $(this).parent('.col');

    $(this).toggleClass('picked');
  checked.push({
    col: $parent.attr('id'),
    cell: $(this).attr('cell-id')
  });
  

})