JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
          <div class='cell'>
          </div>
          <div class='cell'>
          </div>
          <div class='cell'>
          </div>
          <div class='cell'>
          </div>
          </div>      
        </div>

CSS

#container {
           box-sizing: content-box;
           border: 10px solid black;
           width: 200px;
           height: 200px; 
           background: gray;
           padding: 0;
           font-size:0; /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
         }
         .cell {
           box-sizing: border-box;
           border: 10px solid green ;
           width: 100px;
           height: 100px;
           padding: 0;
           margin: 0;
           background: black;
           position: static;
           display: inline-block;
         }