JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td colspan="3"> <input type="text" class="num-text" value="0" /> </td>
    </tr>
    <tr>
        <td colspan="3"> <input type="text" class="num-text" /> </td>
    </tr>
    <tr>    
        <td> <input type="button" value="1" class="num-key" /> </td>
        <td> <input type="button" value="2" class="num-key" /> </td>
        <td> <input type="button" value="3" class="num-key" /> </td>
    </tr>
    
    <tr>    
        <td> <input type="button" value="4" class="num-key" /> </td>
        <td> <input type="button" value="5" class="num-key" /> </td>
        <td> <input type="button" value="6" class="num-key" /> </td>
    </tr>
    <tr>    
        <td> <input type="button" value="7" class="num-key" /> </td>
        <td> <input type="button" value="8" class="num-key" /> </td>
        <td> <input type="button" value="9" class="num-key" /> </td>
    </tr>
    <tr>    
        <td> <input type="button" value="C" class="num-key" /> </td>
        <td> <input type="button" value="0" class="num-key" /> </td>
        <td> <input type="button" value="D" class="num-key" /> </td>
    </tr>
</table>

CSS

.num-text{
   font-weight: bold;
}

.num-key {
   color: red;
}

JavaScript

$( ".num-key" ).click(function() {
    if($(this).val()=="D")
         $(".num-text").val($(".num-text").val().substring(0, $(".num-text").val().length - 1)); 
    else if($(this).val()=="C")
         $(".num-text").val("");
    else
          $(".num-text").val($(".num-text").val()+$(this).val());
});