JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
  function display(val) {
    var dis = document.getElementById("btn");
    dis.value += val;
  }

</script>
<div class="box">
  <div class="display">
    <input type="text" readonly size="20" id="btn" />
  </div>
</div>
<div class="key">
  <div class="row-1">
    <input type="button" class="button gray" value="1" onclick="display(1); return 0;" />
    <input type="button" class="button gray" value="2" />
    <input type="button" class="button gray" value="3" />
    <input type="button" class="button black" value="+" />
  </div>
  <div class="row-2">
    <input type="button" class="button gray" value="4" />
    <input type="button" class="button gray" value="5" />
    <input type="button" class="button gray" value="6" />
    <input type="button" class="button black" value="-" />
  </div>
  <div class="row-3">
    <input type="button" class="button gray" value="7" />
    <input type="button" class="button gray" value="8" />
    <input type="button" class="button gray" value="9" />
    <input type="button" class="button black" value="*" />
  </div>
  <div class="row-4">
    <input type="button" class="button black" value="%" />
    <input type="button" class="button gray" value="0" />
    <input type="button" class="button black" value="^" />
    <input type="button" class="button black" value="/" />
  </div>
  <div class="row-5">
    <input type="button" class="button black" value="C" />
    <input type="button" class="button black" value="=" />
  </div>
</div>

CSS

.box {
  height: 500px;
  width: 400px;
  background-color: red;
}

.display {
  background-color: green;
  position: relative;
  top: 20px;
  left: 50px;
  width: 310px;
  height: 60px;
}

.display input {
  color: black;
  background-color: yellow;
  position: relative;
  left: 3px;
  top: 3px;
  width: 295px;
  height: 45px;
}

.key {
  position: absolute;
  top: 125px;
  left: 50px;
}

.button {
  width: 55px;
  height: 60px;
  margin-left: 15px;
}

.button.gray {
  background-color: gray;
}

.button.black {
  color: white;
  background-color: black;
}