JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div class="grid cf" id="grid">
    <!--<div id="level1"> 
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>  -->  
</div>

CSS

div { box-sizing:border-box; }

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.grid { 
    width:350px; 
    border:1px #3e3e3e solid;    
}

.grid div[id*=level] div { 
    float:left; 
    width:16.66667%; 
    height:50px;      
    text-align:center;    
    border-right:1px #eeeeee solid; 
    border-bottom:1px #eeeeee solid;
    color:#ffffff;
    background:#3e3e3e;
    
}

#grid div[id*=level] div:nth-child(6n+6) {
    border-right:none;    
}

#grid div[id*=level] div:nth-child(n+55) {
    border-bottom:none;
}

JavaScript

var num = 6,
    i = 1,
    grid = document.getElementById('level1');    

level1 = document.createElement('div');
level1.id = 'Level1';
grid.appendChild(level1);

for(i;i<=num;i++) {    
    var square = document.createElement('div');
    var counter = 1;

    grid.appendChild(level1);
        
   /* if(i % 6 === 0) {
            level1.appendChild(square);
       var level = document.createElement('div');
           level.id = 'Level'+i;        
           grid.appendChild(level);           
    }*/

}