JSFiddle - React, Tailwind, and code Playground

HTML

<!--
Comments/Reminders:
- Fix more than one minus
-->
<!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...

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...