JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
         <input type="text" class="calc_display" value="0"  name="calc_display" disabled>
         <p>
             <button>Rad</button>
             <button>Deg</button>
             <button>x!</button>
             <button>(</button>
             <button>)</button>
             <button>%</button>
             <button>CE</button>
         </p>
         <p>
                 <button>Inv</button>
                 <button>sin</button>
                 <button>In</button>
                 <button class="white_buttons cifral_buttons" type="button" data-value="7" data-type="number">7</button>
                 <button class="white_buttons cifral_buttons" data-value="8" data-type="number">8</button>
                 <button class="white_buttons cifral_buttons" data-value="9" data-type="number">9</button>
                 <button id="divide">&divide;</button>
         </p>
         <p>
                 <button>&pi;</button>
                 <button>cos</button>
                 <button>log</button>
                 <button class="white_buttons cifral_buttons" data-value="4" data-type="number" >4</button>
                 <button class="white_buttons cifral_buttons" data-value="5" data-type="number">5</button>
                 <button class="white_buttons cifral_buttons" data-value="6" data-type="number">6</button>
                 <button id="multiply">&times;</button>
         </p>
         <p>
                 <button>e</button>
                 <button>tan</button>
                 <button>&radic;</button>
                 <button class="white_buttons cifral_buttons" data-value="1" data-type="number">1</button>
                 <button class="white_buttons cifral_buttons" data-value="2" data-type="number">2</button>
                 <button class="white_buttons cifral_buttons" data-value="3" data-type="number">3</button>
                 <button id="minus">-</button>
         </p>
         <p>
                 <button>Ans</button>
                ...

CSS

button {
    cursor: pointer;
    width: 67px;
    height: 36px;
    font-weight: bold;
    background: #D1D1D1;
	-webkit-transition: color .5s .5s ease-out;
}

button:hover {
    box-shadow: 2px 2px 6px #369;
	color: green;
}
input {
    width: 490px;
    height: 50px;
    background: #FFFFFF;
    border: 2px solid #498DFF;
}

p {
    margin: 3px 3px 3px 0;
}

.white_buttons {
    background: white;
}



button:active {
    background: #BDBDBD;
}

JavaScript

document.addEventListener( "DOMContentLoaded", setHandler );

function setHandler (  ) {
   
    var wrapper = document.getElementById( "wrapper" );
    
    wrapper.addEventListener ( "click", function ( e ) {
        
        var target = e.target;
        
        if ( !hasClass( target, "cifral_buttons"  ) )
            return;
            
       alert(  target.getAttribute ( "data-value" ) );
               
    } ) ; 

    };
                               
                               
function hasClass(el, cls) {

   for (var c = el.className.split(' '),i=c.length-1; i>=0; i--) {
      if (c[i] == cls) return true;
    }

    return false;
 }