JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>
      Calculator
    </title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  <body>
    <div class="container">
      <div class="wrapper">

        <div class="display" id="display">
          <p class="displayText" id="displayText">8008135
          </p>
        </div>

        <div class="cancel button special"><button class="module-button" onclick="cancel()">CANC</button></div>
        <div class="del button special"><button class="module-button" onclick="del()">DEL</button></div>

        <div class="plus button operation"><button class="module-button" onclick="clickOperationButton('+','+')">+</button></div>
        <div class="minus button operation"><button class="module-button" onclick="clickOperationButton('-','-')">-</button></div>
        <div class="multiply button operation"><button class="module-button" onclick="clickOperationButton('*','×')">×</button></div>
        <div class="divide button operation"><button class="module-button" onclick="clickOperationButton('/','÷')">÷</button></div>


        <div class="seven button number"><button class="module-button" onclick="clickNumberButton(7)">7</button></div>
        <div class="eight button number"><button class="module-button" onclick="clickNumberButton(8)">8</button></div>
        <div class="nine button number"><button class="module-button" onclick="clickNumberButton(9)">9</button></div>

        <div class="four button number"><button class="module-button" onclick="clickNumberButton(4)">4</button></div>
        <div class="five button number"><button class="module-button" onclick="clickNumberButton(5)">5</button></div>
        <div class="six button number"><button class="module-button" onclick="clickNumberButton(6)">6</button></div>

        <div class="one button number"><button class="module-button" onclick="clickNumberButton(1)">1</button></div>
        <div class="two button number"><button class="module-button"...

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 100px;
  font-family: sans-serif;
}

.container {
  width: 40%;
  height: auto;
}

.display {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 80px;
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
}

.cancel {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.del {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 2;
  grid-row-end: 3;
}

.divide {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 3;
}

.multiply {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 3;
  grid-row-end: 4;
}

.minus {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 4;
  grid-row-end: 5;
}

.plus {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 5;
  grid-row-end: 7;
}

.seven {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

.eight {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 3;
  grid-row-end: 4;
}

.nine {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 3;
  grid-row-end: 4;
}

.four {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
}

.five {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 4;
  grid-row-end: 5;
}

.six {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 5;
}

.one {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 6;
}

.two {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 5;
  grid-row-end: 6;
}

.three {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 5;
  grid-row-end: 6;
}

.decimal {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 6;
  grid-row-end: 7;
}

.zero {
 ...