JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Grid Automator</title>
    </head>
    <body>
      <ul id="gridContainer">
      </ul>

      <script src="gridBuilder.js"></script>
      
    </body>
</html>

CSS

.block{
                  position:fixed;
                  display:inline-block;
                  width:3em;
                  height:3em;
                  padding:1em;
                  margin:0;
                  background:pink;
                  border:0.1em solid black;
                  text-align:center;
                  box-sizing:border-box;
                }

                .whack-me{
                  background:lime!important;
                  cursor:pointer;
                }

                ul{
                  margin: 2em auto;
                        
                }

JavaScript

var spiralGrid = (function( window , document ){
  
  'use strict';
  
  var Block = function(){
    
    this.options = {};
       
                    this.options.width = '';
                    this.options.height = '';
                    this.options.cssClass = '';
      
      },
      
      
      
    objGrid = {
    
        options : { 
          
                    noRows : 4,
                    noColumns : 4,
                    cssClass : 'block'
          
                  },
        
        elements : [],
        
        init : function(){
      
                if( this.elements.length ) {

                  return;

                }
          
              var dimensions = 3,
                  count = this.options.noRows * this.options.noColumns, 
                  dx = this.options.noRows, 
                  dy = this.options.noColumns - 1,
                  dxi = dx, 
                  dyi = ( dy ), 
                  doc = document.createDocumentFragment(),
                  dirs = [ 

                            { side : "left" ,  modifier : 1 } , 
                            { side : "top" ,  modifier : 1 } , 
                            { side : "left" ,  modifier : -1 } ,
                            { side : "top" ,  modifier : -1 } 

                          ],
                  di = 0,
                  d = dirs[di],
                  currentTop = 0, 
                  currentLeft = 0, 
                  bgStart = 240, 
                  bgStep = 128 / count, 
                  bgHex, 
                  bgColor,
                  left = 2,
                  top = 2,
                  i = 0;
              
              for ( i ; i < count ; i++ ) {

                  d = dirs[di]; // change direction
                  var side = d.side, modifier = d.modifier; // if direction counter hits 0, change direction
                    
                    if (side === 'left') { 

                        left += modifier * dimensions; 
...