JSFiddle - React, Tailwind, and code Playground

HTML

<div id="world"></div>
    <div id="story-elements">
  <div id="narrative-text">
    Default
  </div>
  <br>
  <div id="continue">continue</div>
</div>

CSS

body{
    font-size:180%;
    margin: 0px auto 0px auto;
    /*position:relative;*/
    font-family: 'Play', sans-serif;
    /*overflow:hidden;*/
}

#save-rule{
    position:absolute;
    bottom:5px;
    right:5px;
    cursor:pointer;
}

#story-elements{
    position:absolute;
    margin:50px;
    z-index:999999;
    padding:15px;
    border-radius:5px;
    background:white;
    border:1px solid #909090;
}

#continue{
    font-size:50%;
    border:1px solid #999999;
    color:#909090;
    width:110px;
    padding:5px;
    border-radius:10px;
    text-align:center;
    float:right;
}

#continue:hover{
    cursor:pointer;
    background:white;
}

#world{
    position:absolute;
    width:100%;
    height:100%;
}

.cell{
    position:absolute;
    background:black;
    opacity:0.4;
    border-radius:20px;
}

JavaScript

var Law = {
    '100000000': 0,
    '100000001': 0,
    '100000010': 0,
    '100000011': 0,
    '100000100': 0,
    '100000101': 0,
    '100000110': 0,
    '100000111': 0,
    '100001000': 0,
    '100001001': 1,
    '100001010': 0,
    '100001011': 0,
    '100001100': 0,
    '100001101': 1,
    '100001110': 0,
    '100001111': 0,
    '100010000': 1,
    '100010001': 1,
    '100010010': 0,
    '100010011': 0,
    '100010100': 0,
    '100010101': 0,
    '100010110': 1,
    '100010111': 1,
    '100011000': 1,
    '100011001': 0,
    '100011010': 0,
    '100011011': 0,
    '100011100': 0,
    '100011101': 0,
    '100011110': 0,
    '100011111': 0,
    '100100000': 0,
    '100100001': 0,
    '100100010': 1,
    '100100011': 0,
    '100100100': 0,
    '100100101': 0,
    '100100110': 0,
    '100100111': 1,
    '100101000': 0,
    '100101001': 0,
    '100101010': 0,
    '100101011': 0,
    '100101100': 0,
    '100101101': 0,
    '100101110': 1,
    '100101111': 0,
    '100110000': 0,
    '100110001': 1,
    '100110010': 1,
    '100110011': 0,
    '100110100': 1,
    '100110101': 0,
    '100110110': 0,
    '100110111': 0,
    '100111000': 1,
    '100111001': 0,
    '100111010': 1,
    '100111011': 0,
    '100111100': 0,
    '100111101': 0,
    '100111110': 0,
    '100111111': 0,
    '101000000': 0,
    '101000001': 1,
    '101000010': 0,
    '101000011': 0,
    '101000100': 0,
    '101000101': 0,
    '101000110': 0,
    '101000111': 0,
    '101001000': 0,
    '101001001': 0,
    '101001010': 0,
    '101001011': 0,
    '101001100': 0,
    '101001101': 0,
    '101001110': 1,
    '101001111': 0,
    '101010000': 0,
    '101010001': 0,
    '101010010': 0,
    '101010011': 1,
    '101010100': 1,
    '101010101': 0,
    '101010110': 1,
    '101010111': 0,
    '101011000': 0,
    '101011001': 0,
    '101011010': 0,
    '101011011': 0,
    '101011100': 1,
    '101011101': 0,
    '101011110': 0,
    '101011111': 1,
    '101100000': 1,
    '101100001': 0,
    '101100010': 0,
   ...