JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
    <div class="container">
        <div class="sub-container">
          <div class="display">
            <p id="result-display">
      
            </p>
          </div>
          <div class="button-grid">
            <div>
              <button class="item" id="7" data-type="number">
      7
      </button>
            </div>
            <div>
              <button class="item" id="8" data-type="number">
      8
      </button>
            </div>
            <div>
              <button class="item" id="9" data-type="number">
      9
      </button>
            </div>
            <div>
              <button class="item" id="divide" data-type="nonNumberFunction">
      &divide;
      </button>
            </div>
            <div>
              <button class="item" id="4" data-type="number">
      4
      </button>
            </div>
            <div>
              <button class="item" id="5" data-type="number">
      5
      </button>
            </div>
            <div>
              <button class="item" id="6" data-type="number">
      6
      </button>
            </div>
            <div>
              <button class="item" id="multiply" data-type="nonNumberFunction">
      &times;
      </button>
            </div>
            <div>
              <button class="item" id="1" data-type="number">
      1
      </button>
            </div>
            <div>
              <button class="item" id="2" data-type="number">
      2
      </button>
            </div>
            <div>
              <button class="item" id="3" data-type="number">
      3
      </button>
            </div>
            <div>
           ...

CSS

body {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  margin: 0;
  font-size: 18px;
  background-image: linear-gradient(to right, lightgray, white);
}

.wrapper {
  display: flex;
align-content: center; 
justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 275px;
  /*  height: 415px; */
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5);
}

.sub-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* height: 100%;  */
  /*   width: 800%; */
}

.display {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* border: 1px solid white; */
  width: 100%;
  height: 65px;
  /*   margin: 0 0 5% 0;  */
  color: white;
  background-color: black;
}

#result-display {
  margin-right: 8%;
}

.button-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
}

.item {
  width: 68px;
  height: 65px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: black;
  font-size: 18px;
  background-color: rgba(209, 190, 200, 0.17);
}

.item:hover,
[data-type="nonNumber"]:hover {
  background-color: rgba(252, 252, 252, 0.2);
}

#Enter {
  width: 206px;
}

#Enter {
  background-color: orange;
}

#Enter:hover {
  background-color: rgb(255, 165, 0, 0.6);
}

#AC {
  background-color: #fcfcfc;
}

[data-type="nonNumber"] {
  background-color: lightgray;
}

footer {
  background: rgba(128, 128, 128, 0.3);
  padding: 8px 0;
  display: flex;
  justify-content: center;
  margin-top: auto;
}

JavaScript

//Create variable to hold display value, create variable of display area and populate.
let toShow = 0;
let displayValue;
let displayArea = document.getElementById('result-display');
let dataType = document.querySelectorAll('[data-type]');
let operator = "";
let firstNumber;
let secondNumber;
let operatorPressed = false;
let secondNumberCounter = false;
let firstNumberCounter = true;
let buttonNumber;
let decimalCounter;
let selectedKey;
let type;
let numberCounter = 0;
displayArea.textContent = 0;
const buttonGrid = document.querySelector('.button-grid');

//Basic math functions
add = (firstNumber, secondNumber) => firstNumber + secondNumber;
subtract = (firstNumber, secondNumber) => firstNumber - secondNumber;
multiply = (firstNumber, secondNumber) => firstNumber * secondNumber;
divide = (firstNumber, secondNumber) => firstNumber / secondNumber;

//Take an operator and two numbers and call a math function
operate = (operator, firstNumber, secondNumber) => {
    firstNumber = Number(firstNumber);
    secondNumber = Number(secondNumber);
    secondNumberCounter = false;
    operatorPressed = false;
  toShow = operator(firstNumber, secondNumber);
  return Math.round(toShow * 100) / 100;
};

//Update display on keydown event
addEventListener('keydown', (e) => {
    pressedKey = event.key;
    keyDownOperatorMapping(e);
});

let keyDownOperatorMapping = (e) => {
if (pressedKey === "+" || pressedKey === "-" || pressedKey === "*" || pressedKey === "Enter" || pressedKey === "Backspace" || pressedKey === "/") {
selectedKey = String(pressedKey);
operatorPressed = true;
type = "nonNumberFunction";
masterFunction(e);
} else if (pressedKey === "Shift") {
}
else if (pressedKey === ".") {
    addDecimal(e);
}
else {
selectedKey = Number(pressedKey);
type = "number";
masterFunction(e);
}
};

//Update display with button clicked
buttonGrid.addEventListener('click', e => {
pressedKey = e.target.id;
type = e.target.dataset.type;
if (type === "number") {
selectedKey =...