JSFiddle - React, Tailwind, and code Playground

HTML

<head lang="en">
    <title>Калькулятор</title>
    <link rel="stylesheet" href="style.css" type="text/css" >
    <script src="jsCalc.js"></script>
</head>
<body>
     <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"...

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

window.onload = function () {
    function display() {
        var ellements = document.getElementsByClassName("cifral_buttons");
        var show = ellements.getAttribute("data-value");
    }
    display ();
}