JSFiddle - React, Tailwind, and code Playground

HTML

<div class="calculator">
  <input type="text" class="display">
  <br>
  <input type="button" value="0" class="number">
  <input type="button" value="1" class="number">
  <input type="button" value="2" class="number">
  <input type="button" value="3" class="number">
  <input type="button" value="4" class="number">
  <input type="button" value="5" class="number">
  <input type="button" value="6" class="number">
  <input type="button" value="7" class="number">
  <input type="button" value="8" class="number">
  <input type="button" value="9" class="number">
  <br>
  <input type="button" value="+" class="action">
  <input type="button" value="-" class="action">
  <input type="button" value="*" class="action">
  <input type="button" value="/" class="action">
</div>

JavaScript

let calculatorElem = document.querySelector('.calculator'),
    display = calculatorElem.querySelector('.display')
    
calculatorElem.addEventListener('click', evt => {
  if (evt.target.matches('.number')) {
    display.value += evt.target.value
  } else if (evt.target.matches('.action')) {
    // ...
  }
})