JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div class="grid cf" id="grid"></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 { 
    float:left; 
    width:16.66667%; 
    height:50px; 
    padding-top:15px;    
    text-align:center;    
    border-right:1px #eeeeee solid; 
    border-bottom:1px #eeeeee solid;
    color:#aaa;
    background:#3e3e3e;
    
}

#grid div:nth-child(6n+6) {
    border-right:none;    
}

#grid div:nth-child(n+55) {
    border-bottom:none;
}

JavaScript

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

for(i;i<=num;i++) {    
    square = document.createElement('div');
    //square.innerHTML = i;
    grid.appendChild(square);
}