JSFiddle - React, Tailwind, and code Playground

HTML

<div class="numbers">
  <div class="row">
    <div class="button number" id="number1">1</div>
    <div class="button number" id="number2">2</div>
    <div class="button number" id="number3">3</div>
  </div>
  <div class="row">
    <div class="button number" id="number4">4</div>
    <div class="button number" id="number5">5</div>
    <div class="button number" id="number6">6</div>
  </div>
  <div class="row">
    <div class="button number" id="number7">7</div>
    <div class="button number" id="number8">8</div>
    <div class="button number" id="number9">9</div>
  </div>
  <div class="row">
    <div class="button number" id="number0">0</div>
    <div class="button" id="colon">:</div>
  </div>
</div>

CSS

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

}
.numbers {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-between;
}

.button {
  display: flex;
  flex-basis: 32%;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid gray;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
}

.button#number0 {
  flex-basis: 66%;
}

.button#colon {
}