JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      <div class="item"></div>
    </div>
  </div>
</div>

SCSS

*, *:before, *:after {
  box-sizing: border-box;
}

.table {
  display: table;
  border-collapse: separate;
  margin: 20px;
  padding: 0;
  
  &-row {
    display: table-row;
  }
  
  &-cell {
    display: table-cell;
    border: 1px solid #000;
    height: 40px;
    width: 40px;
    margin: 0;
    padding: 0;
    outline: none;
    font-size: 0;
    vertical-align: top;
    
    &:last-child {
      border: 0;
    }
  }
}

.item {
  border: 1px solid red;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  outline: none;
}