JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <h1 id="field">myCalculator</h1>
    <table>
        <tr>
            <td id="main" colspan="4">
                <div id="display1"></div>
            </td>
        </tr>
        <tr>
            <td class="numbers"><button id="power">^</button></td>
            <td class="numbers"><button id="squareroot">√</button></td>
            <td class="numbers"><button id="delete">DEL</button></td>
            <td class="numbers"><button id="clear">C</button></td>
        </tr>
        <tr>
            <td class="numbers"><button class='btn-input'>0</button></td>
            <td class="numbers"><button class='btn-input'>1</button></td>
            <td class="numbers"><button class='btn-input'>2</button></td>
            <td class="numbers"><button id="divide">/</button></td>
        </tr>
        <tr>
            <td class="numbers"><button class='btn-input'>3</button></td>
            <td class="numbers"><button class='btn-input'>4</button></td>
            <td class="numbers"><button class='btn-input'>5</button></td>
            <td class="numbers"><button id="multiply">*</button></td>
        </tr>
        <tr>
            <td class="numbers"><button class='btn-input'>6</button></td>
            <td class="numbers"><button class='btn-input'>7</button></td>
            <td class="numbers"><button class='btn-input'>8</button></td>
            <td class="numbers"><button id="subtract">-</button></td>
        </tr>
        <tr>
            <td class="numbers"><button class='btn-input'>9</button></td>
            <td class="numbers"><button id="dot">.</button></td>
            <td class="numbers"><button id="add">+</button></td>
            <td class="numbers"><button id="equals">=</button></td>
        </tr>
    </table>

    <script src="main.js"></script>
</body>

</html>

CSS

table {
    border-spacing: 5px;
    margin-left: 36%;
    margin-top: 5%;
    width: 373px;
    overflow: hidden;
    table-layout: fixed;
}

table, th, td {
    border: 9px solid #8d99ae;
}

th, td {
    padding: 20px;
}

#display {
    text-align: right;
    word-wrap: break-word;
}
body {
    background-color: #cad2c5;
}

button {
    margin-left: -30%;
    width: 40px;
    cursor: pointer;
    color: black;
    background-color: #e5e5e5;
}

#main {
    background-color: white;
}

#field {
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: x-large;
    text-decoration: underline;
}

h1 {
    text-align: center;
    margin-left: -1.8%;
}

.numbers {
    background-color: #1d3557;
}

#display1 {
    float: right;
}

#display2 {
    float: right;
}

#results {
    float: right;
}

JavaScript

"use strict";
let display = document.getElementById("display1");

function operatorButton() {
    var button = document.getElementById("squareroot");
    button.addEventListener("click", function () {
        display.innerHTML += "√";
    })
    var button = document.getElementById("power");
    button.addEventListener("click", function () {
        display.innerHTML += "^";
    })
    var button = document.getElementById("divide");
    button.addEventListener("click", function () {
        display.innerHTML += "/";
    })
    var button = document.getElementById("multiply");
    button.addEventListener("click", function () {
        display.innerHTML += "*";
    })
    var button = document.getElementById("subtract");
    button.addEventListener("click", function () {
        display.innerHTML += "-";
    })
    var button = document.getElementById("add");
    button.addEventListener("click", function () {
        display.innerHTML += "+";
    })
    var button = document.getElementById("dot");
    button.addEventListener("click", function () {
        display.innerHTML += ".";
    })
    var button = document.getElementById("clear");
    button.addEventListener("click", function () {
        display.innerHTML = "";
    })
    var button = document.getElementById("delete");
    button.addEventListener("click", function () {
        display.innerHTML = display.innerHTML.slice(0, display.innerHTML.length - 1);
    })
}
operatorButton();

function numButton() {
    let button = document.querySelectorAll('.btn-input');
    for (let i = 0; i < button.length; i++) {
        button[i].addEventListener("click", function () {
            display.innerHTML += i
        })
    }
}
numButton();

const addition = (operand1, operand2) => operand1 + operand2;
const subtraction = (operand1, operand2) => operand1 - operand2;
const multiplication = (operand1, operand2) => operand1 * operand2;
const division = (operand1, operand2) => operand1 / operand2;
const squareroot =...