JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-grid">
      <div data-input class="input">3</div>
      <button data-all-clear class="span-two">AC</button>
      <button data-delete>DEL</button>
      <button data-operation>/</button>
      <button data-number>1</button>
      <button data-number>2</button>
      <button data-number>3</button>
      <button data-operation>*</button>
      <button data-number>4</button>
      <button data-number>5</button>
      <button data-number>6</button>
      <button data-operation>+</button>
      <button data-number>7</button>
      <button data-number>8</button>
      <button data-number>9</button>
      <button data-operation>-</button>
      <button data-number>.</button>
      <button data-number>0</button>
      <button data-equals class = "span-two">=</button>
  </div>

JavaScript

const minus = document.querySelector('[data-delete]');
const current = document.querySelector('[data-input]');
const allClear = document.querySelector('[data-all-clear]');
const numberButtons = document.querySelectorAll('[data-number]')
const operation = document.querySelectorAll('[data-operation]')  
const equals =document.querySelector('[data-equals]')

class Calc {
    constructor(inputText){
        this.inputText = current
        this.clear()
    }
    clear(){
        this.input=''
        this.operation=undefined
    }
    delete(){

    }
    writeNumber(num){
        this.input = num
    }
    operation(sign){

    }
    compute(){

    }
    updateDisplay(){
        this.input.innerText = this.operation
    }
    appendNumber(num) {
        current.innerHTML = num;
    }
}
const calculator = new Calc(current.value);

numberButtons.forEach(number=>{
  number.addEventListener('click',()=>{
      calculator.appendNumber(number.innerHTML)
  })
})