JSFiddle - React, Tailwind, and code Playground

by Michael Baas

HTML

<div id="world">
  <table id="grid">
    <tbody>
      <tr>
        <td id="grid_r1c1" class="slot"></td>
        <td id="grid_r1c2" class="slot"></td>
        <td id="grid_r1c3" class="slot"></td>
        <td id="grid_r1c4" class="slot"></td>
        <td id="grid_r1c5" class="slot"></td>
        <td id="grid_r1c6" class="slot"></td>
        <td id="grid_r1c7" class="slot"></td>
        <td id="grid_r1c8" class="slot"></td>
        <td id="grid_r1c9" class="slot"></td>
        <td id="grid_r1c10" class="slot"></td>
        <td id="grid_r1c11" class="slot"></td>
        <td id="grid_r1c12" class="slot"></td>
        <td id="grid_r1c13" class="slot"></td>
        <td id="grid_r1c14" class="slot"></td>
        <td id="grid_r1c15" class="slot"></td>
        <td id="grid_r1c16" class="slot"></td>
        <td id="grid_r1c17" class="slot"></td>
        <td id="grid_r1c18" class="slot"></td>
        <td id="grid_r1c19" class="slot"></td>
        <td id="grid_r1c20" class="slot"></td>
        <td id="grid_r1c21" class="slot"></td>
      </tr>
      <tr>
        <td id="grid_r2c1" class="slot"></td>
        <td id="grid_r2c2" class="slot"></td>
        <td id="grid_r2c3" class="slot"></td>
        <td id="grid_r2c4" class="slot"></td>
        <td id="grid_r2c5" class="slot"></td>
        <td id="grid_r2c6" class="slot"></td>
        <td id="grid_r2c7" class="slot"></td>
        <td id="grid_r2c8" class="slot"></td>
        <td id="grid_r2c9" class="slot"></td>
        <td id="grid_r2c10" class="slot"></td>
        <td id="grid_r2c11" class="slot"></td>
        <td id="grid_r2c12" class="slot"></td>
        <td id="grid_r2c13" class="slot"></td>
        <td id="grid_r2c14" class="slot"></td>
        <td id="grid_r2c15" class="slot"></td>
        <td id="grid_r2c16" class="slot"></td>
        <td id="grid_r2c17" class="slot"></td>
        <td id="grid_r2c18" class="slot"></td>
        <td id="grid_r2c19" class="slot"></td>
        <td id="grid_r2c20" class="slot"></td>
     ...

CSS

.slot {
  height: 20px;
  width: 20px;
}

.live,
.dead,
.surv {
  border-radius: 33%;
  position: absolute;
  z-index: -1;
}

.live {
  background: LimeGreen;
  background: radial-gradient(DarkGreen, Aqua);
}

.surv {
  background: DarkGreen;
  background: radial-gradient(DarkGreen, Khaki);
}

.dead {
  background: Khaki;
  background: radial-gradient(Khaki, White);
}

#world td {
  border: 1px solid silver;
  cursor: pointer;
}

#world table {
  border-collapse: collapse;
}

#step {
  width: 3em;
}