JSFiddle - React, Tailwind, and code Playground

by SwampFall

HTML

<div class="calculator">
  <div class="screen"></div>
  <div class="calcKeys">
    <div class="calcNumbers">
      <div class="calcKey" onClick="pressKey(0);">7</div>
      <div class="calcKey" onClick="pressKey(0);">8</div>
      <div class="calcKey" onClick="pressKey(0);">9</div>
      <div class="calcKey" onClick="pressKey(0);">4</div>
      <div class="calcKey" onClick="pressKey(0);">5</div>
      <div class="calcKey" onClick="pressKey(0);">6</div>
      <div class="calcKey" onClick="pressKey(0);">1</div>
      <div class="calcKey" onClick="pressKey(0);">2</div>
      <div class="calcKey" onClick="pressKey(0);">3</div>
      <div class="calcKey" onClick="pressKey(0);">0</div>
      <div class="calcKey" onClick="pressKey(0);">.</div>
      <div class="calcKey" onClick="pressKey(0);">=</div>
    </div>
    <div class="calcOperations">
      <div class="calcKey" onClick="pressKey(0);">/</div>
      <div class="calcKey" onClick="pressKey(0);">*</div>
      <div class="calcKey" onClick="pressKey(0);">-</div>
      <div class="calcKey" onClick="pressKey(0);">+</div>
    </div>
  </div>
</div>

CSS

div {
  box-sizing: border-box;
}

.calculator {
  width: 200pt;
  height: 300pt;
  background: grey;
}
.screen {
  width: 95%;
  padding: 5pt;
  margin-top: 5pt;
  margin-left: auto;
  margin-right: auto;
  alignment: center;
  background: lightgreen;
  height: 40pt;
}