JSFiddle - React, Tailwind, and code Playground

HTML

<div class="controls">
  <button class="minus">-</button>
  <button class="reset">A</button>
  <button class="plus">+</button>
</div>
<div class="year-grid">
  <div class="month-grid">
    <div class="day-item">1</div>
    <div class="day-item">2</div>
    <div class="day-item">3</div>
    <div class="day-item">4</div>
    <div class="day-item">5</div>
    <div class="day-item">6</div>
    <div class="day-item">7</div>
    <div class="day-item">8</div>
    <div class="day-item">9</div>
    <div class="day-item">10</div>
    <div class="day-item">11</div>
    <div class="day-item">12</div>
    <div class="day-item">13</div>
    <div class="day-item">14</div>
    <div class="day-item">15</div>
    <div class="day-item">16</div>
    <div class="day-item">17</div>
    <div class="day-item">18</div>
    <div class="day-item">19</div>
    <div class="day-item">20</div>
    <div class="day-item">21</div>
    <div class="day-item">22</div>
    <div class="day-item">23</div>
    <div class="day-item">24</div>
    <div class="day-item">25</div>
    <div class="day-item">26</div>
    <div class="day-item">27</div>
    <div class="day-item">28</div>
    <div class="day-item">29</div>
    <div class="day-item">30</div>
    <div class="day-item">31</div>
  </div>
  <div class="month-grid">
    <div class="day-item">1</div>
    <div class="day-item">2</div>
    <div class="day-item">3</div>
    <div class="day-item">4</div>
    <div class="day-item">5</div>
    <div class="day-item">6</div>
    <div class="day-item">7</div>
    <div class="day-item">8</div>
    <div class="day-item">9</div>
    <div class="day-item">10</div>
    <div class="day-item">11</div>
    <div class="day-item">12</div>
    <div class="day-item">13</div>
    <div class="day-item">14</div>
    <div class="day-item">15</div>
    <div class="day-item">16</div>
    <div class="day-item">17</div>
    <div class="day-item">18</div>
    <div class="day-item">19</div>
    <div class="day-item">20</div>
    <div...

CSS

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  color: rgba(95, 119, 119, 0.5);
}

body {
  background: #1D1F20;
  font-size: 4px;
}

.year-grid {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
  background: #f5f5f5;
  grid-gap: 10px;

  width: 100%;
  height: 100%;
}

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;
  /* new */
  min-width: 0;
  /* new; needed for FF */

}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;
  /* new */
  min-width: 0;
  /* new; needed for FF */
}

.controls {
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 0;
}

.controls button {
  display: inline-block;
  border: none;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  font-weight: 500;
  font-size: 1rem;
  font-family: inherit;
  width: 2rem;
  height: 2rem;
  margin-right: 0.3rem;
  vertical-align: top;
}

JavaScript

var fontSize = 4

document.body.style.fontSize = `${fontSize}px`

document.querySelector('.minus').onclick = () => {
  fontSize *= 0.8
  document.body.style.fontSize = `${fontSize}px`
}

document.querySelector('.plus').onclick = () => {
  fontSize *= 1.25
  document.body.style.fontSize = `${fontSize}px`
}

document.querySelector('.reset').onclick = () => {
  fontSize = 4
  document.body.style.fontSize = `${fontSize}px`
}