JSFiddle - React, Tailwind, and code Playground

HTML

<div id="calendar">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
  <div>
    6
  </div>
  <div>
    7
  </div>
  <div>
    8
  </div>
  <div>
    9
  </div>
  <div>
    10
  </div>
  <div>
    11
  </div>
  <div>
    12
  </div>
  <div>
    13
  </div>
  <div>
    14
  </div>
</div>

CSS

#calendar {
  display: flex;
  flex-flow: row wrap;
}

#calendar div {
  display: inline-block;
  margin:10px 0 0 10px;
  flex-grow: 1;
  text-align: center;
  width: calc(100% * (1/4) - 10px - 1px)
}