JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
      <div class='cell'>
        <div class='innerCell'>
            <img src='chick.png'/>
        </div>
      </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;
     }
     .innerCell {
        position: absolute;
     }
     img {
       top: 10px;
       width: 50px;
       height: 50px;
       }