JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="layout.css" />
  </head>

  <body>
    <div class="body">
      <div id="display"></div>

      <div class="button-container">
        <div class="number-container">
          <div class="function-button">
            <input type="button" class="function-button" id="1" value="1">
          </div>
          <div class="function-button" id="2">
            <input type="button" class="function-button" id="2" value="2">
          </div>
          <div class="function-button" id="3">
            <input type="button" class="function-button" id="3" value="3">
          </div>
          <div class="function-button" id="4">
            <input type="button" class="function-button" id="4" value="4">
          </div>
          <div class="function-button" id="5">
            <input type="button" class="function-button" id="5" value="5">
          </div>
          <div class="function-button" id="6">
            <input type="button" class="function-button" id="6" value="6">
          </div>
          <div class="function-button" id="7">
            <input type="button" class="function-button" id="7" value="7">
          </div>
          <div class="function-button" id="8">
            <input type="button" class="function-button" id="8" value="8">
          </div>
          <div class="function-button" id="9">
            <input type="button" class="function-button" id="9" value="9">
          </div>

          <div class="function-button" id="reset">
            <input type="button" class="function-button" id="DEL" value="DEL">
          </div>
          <div class="function-button" id=".">
            <input type="button" class="function-button" id="dec" value=".">
          </div>
          <div class="function-button" id="reset">
            <input type="button" class="function-button" id="CLR" value="CLR">
          </div>
        </div>

        <div...

CSS

.body {
    height: 600px;
    width: 500px;

    margin-top: 200px;
    margin-left: auto;
    margin-right: auto;

    padding: auto;
    
    border: 5px solid black;
    border-radius: 30px;
    background-color: lightskyblue;

    align-content: center;
}

#display {
    height: 70px;
    width: 450px;

    background-color: whitesmoke;

    border: 1px solid black;
    border-radius: 5px;

    margin-left: 25px;
    margin-top: 20px;
}
.button-container {
    display: flex;
    flex-flow: row nowrap;
}

.number-container {
    display: flex;
    flex-flow: row wrap;

    width: 550px;

    flex: 0 0 300px;
    padding: 15px;

    margin-left: 20px;
    margin-top: 30px;
}



.function-container {
    display: flex;
    flex-flow: column nowrap;

    flex: 0 0 200px;

    margin-top: 30px;
    margin-left: 15px;
    
}

.function-button {
    display: flex;
    flex: 0 1 auto;

    width: 70px;
    height: 70px;

    border: 1px solid black;
    border-radius: 5px;

    margin-bottom: 10px;
    margin-right: 5px;
    padding: 5px;

    background-color: antiquewhite;

    text-align: center;
}

p {
    margin: auto;
    font-size: 1.5em;
    font-style: "Arial";
}

#reset, #DEL, #CLR {
    background-color: lightcoral;
}

#equal, #equate{
    background-color: lightgoldenrodyellow;
}

#op, #plus, #minus, #mult, #div  {
    background-color: lightgreen;
}

input[type="button"] {
    margin: auto;
    font-size: 1.5em;
    font-style: "Arial";
    border:none;
}

JavaScript

//initialize containers
let btn1 = document.getElementById("1");
let btn2 = document.getElementById("2");
let btn3 = document.getElementById("3");
let btn4 = document.getElementById("4");
let btn5 = document.getElementById("5");
let btn6 = document.getElementById("6");
let btn7 = document.getElementById("7");
let btn8 = document.getElementById("8");
let btn9 = document.getElementById("9");

let btnPlus = document.getElementById("plus");
let btnMinus = document.getElementById("minus");
let btnMult = document.getElementById("mult");
let btnDiv = document.getElementById("div");

let btnCLR = document.getElementById("CLR");
let btnDec = document.getElementById("dec");
let btnDEL = document.getElementById("DEL");

let btnEquate = document.getElementById("equate");

const display = document.getElementById("display");

//event listeners
btn1.addEventListener("click", function() {
  include("1");
});
btn2.addEventListener("click", function() {
  include("2");
});
btn3.addEventListener("click", function() {
  include("3");
});
btn4.addEventListener("click", function() {
  include("4");
});
btn5.addEventListener("click", function() {
  include("5");
});
btn6.addEventListener("click", function() {
  include("6");
});
btn7.addEventListener("click", function() {
  include("7");
});
btn8.addEventListener("click", function() {
  include("8");
});
btn9.addEventListener("click", function() {
  include("9");
});

btnPlus.addEventListener("click", function() {
  include('+')
});
btnMinus.addEventListener("click", function() {
  include("-");
});
btnMult.addEventListener("click", function() {
  include("x");
});
btnDiv.addEventListener("click", function() {
  include("/");
});

// deleteItem(), clearDisp() and equate() are undefined, so I will comment them out.
// btnCLR.addEventListener("click", clearDisp);
btnDec.addEventListener("click", function() {
  include(".")
});

// btnDEL.addEventListener("click", deleteItem);

// btnEquate.addEventListener("click",...