JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="start();">
     <div id="container">

         <div id="interface">
             <div class="buttonL">
                 <div><input type="submit" value="Wpłata" class="buttonLi" id="depositButton" onclick="actionListener('deposit');"></div>
                 <div><input type="submit" value="Wypłata" class="buttonLi" id="withdrawButton" onclick="actionListener('withdraw');"></div>
             </div>
             <div id="screen">
             </div>
             <div class="buttonR">
                 <div><input type="submit" value="Stan konta" class="buttonRi" id="accountCheckButton" onclick="actionListener('accountStatus');"></div>
                 <div><input type="submit" value="Wyjdź" class="buttonRi" id="exitButton" onclick="actionListener('exit');"></div>
             </div>
         </div>
            <div style="clear: both;"></div>
         <div class="keyboard">
             <div><input type="button" class="numKey" id="key7" value="7" ></div>
             <div><input type="button" class="numKey" id="key8" value="8" ></div>
             <div><input type="button" class="numKey" id="key9" value="9" ></div>
                <div style="clear: both;"></div>
             <div><input type="button" class="numKey" id="key4" value="4" onclick="enterPIN(this.value);"></div>
             <div><input type="button" class="numKey" id="key5" value="5" onclick="enterPIN(this.value);"></div>
             <div><input type="button" class="numKey" id="key6" value="6" onclick="enterPIN(this.value);"></div>
                <div style="clear: both;"></div>
             <div><input type="button" class="numKey" id="key1" value="1" onclick="enterPIN(this.value);"></div>
             <div><input type="button" class="numKey" id="key2" value="2" onclick="enterPIN(this.value);"></div>
             <div><input type="button" class="numKey" id="key3" value="3" onclick="enterPIN(this.value);"></div>
                <div style="clear: both;"></div>
             <div><input...

CSS

body
{
    background-color: #81848F;
    margin-left: auto;
    margin-right: auto;
}

#container
{
    border: 2px solid yellow;
    margin: 10%;
    padding-left: 2%;
    height: 400px;
    width: 500px;
}

#interface
{
    margin-left: 5%;
    margin-top: 5%;
}

.buttonL
{
    float: left;
    margin-right: 5px;
    margin-top: 20px;
    text-align: right;
}

input.buttonLi
{
    color: #00C217;
}

#withdrawButton
{
    margin-top: 37px;
}

#screen
{
    float: left;
    border: 2px solid black;
    height: 150px;
    width: 275px;
    background-color: white;
}

.buttonR
{
    float: left;
    margin-left: 5px;
    margin-top: 20px;
}

input.buttonRi
{
    color: red;
}

#exitButton
{
    margin-top: 37px;
}

.keyboard
{
    float: left;
    border: 2px solid red;
    width: 106px;
    height: 141px;
}

input.numKey
{
    color: black;
    float:left;
    margin: 1px;
}

input#key0
{
    float: left;
    width: 64px;
}

input#keyDelete
{
    float: left;
    color: red;
    width: 32px;
    margin-top: 1px;
}

input#keyOk
{
    color: green;
    float: left;
    margin-top: 10px;
    width: 40px;
}

input#keyCancel
{
    float: left;
    color: red;
    margin-top: 10px;
    margin-left: 5px;

}

.slot
{
    float: left;
    margin-left: 200px;
}

#moneySlot
{
    margin-top: 10px;
    background-color: white;
    width: 100px;
}

JavaScript

// Function flags
var keyboardStatus = 0,
    exitStatus = 0, //0-when in menu, 1-when in submenu
    menuStatus = 0, //0-when not logged in, 1-when in menu, 2-when in submenu
    digitStatus = 0; //0-when typing PIN, 1-when typing amount of cash to deposit/withdraw

// Site start
function start()
{
    document.getElementById("screen").innerHTML = "Włoż kartę do czytnika &nbsp; (kliknij /card/)";
}

// Type and delete PIN code
 var cardInserted = function(digit, callback) //<--(numKeyValue)
 {
    digitStatus = 0;

    document.getElementById("screen").innerHTML = "Wpisz kod PIN: ";
    //console.log("exit status " + exitStatus);

        var onScreen = document.getElementById('screen'),
            pinLength = 4,
            initialPIN = "",
            addDigit = function(digit){
                //numKeyValue = numKeyValue instanceof MouseEvent ? this.value : numKeyValue;
                if (onScreen.innerHTML.length + pinLength < 23) onScreen.innerHTML += this.value;
                //if (onScreen.innerHTML == 1234) console.log("PIN został wprowadzony");
            },
            delDigit = function(){
                if (onScreen.innerHTML.length > 15) onScreen.innerHTML = onScreen.innerHTML.slice(0, -1);
            };
        numButtons = document.getElementsByClassName('numKey');
        for (var i = 0 ; i < numButtons.length; i++) numButtons[i].onclick = addDigit;
        document.getElementById('keyDelete').onclick = delDigit;

        //submitKey();

        //document.getElementById("keyOk").onclick = console.log(333);
 }

// Type and delete PIN code
//function enterPIN(numKeyValue)
//{
//    // Trial function
//    /*for (i=0; i<document.getElementsByClassName("numKey").length; i++)
//    {
//        var numKeyId = i + " " + document.getElementsByClassName("numKey")[i].id;
//        console.log(numKeyId);
//        return numKeyId;
//
//    }
//
//    var getElementId = function(numKeyId)
//    {
//        this.numKeyId = numKeyId;
//       ...