JSFiddle - React, Tailwind, and code Playground

HTML

<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<div class="label"> Saisissez votre nr. de teléphone : </div>
<div class="machine">


<div id="screen"></div>
<table>
<tr>
  <td class="but">1</td>
  <td class="but">2</td>
  <td class="but">3</td>
</tr>
<tr>
  <td class="but">4</td>
  <td class="but">5</td>
  <td class="but">6</td>
</tr>
<tr>
<td class="but">7</td>
<td class="but">8</td>
<td class="but">9</td>
</tr>
<tr>
  <td class="del">&larr;</td>
  <td class="but">0</td>
  <td class="clr">Clr</td>
</tr>
</table>

</div>

CSS

.label {
  font-family: 'Orbitron';
  padding-bottom: 10px;
  }
.machine {
  padding:10px;
  -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: solid 2px silver;
    width: 175px;
    background-color: grey;
}
table {
  padding-top: 15px;
  margin-left: 8px;
  border-spacing: 5px;
   
}
td {
  width: 40px;
    height: 40px;
    }
.but,.del, .clr {
    font-family: Verdana;
    cursor: pointer;
    border: solid 2px silver;
    text-align: center;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background-color: #D0D0D0;
    font-family: 'Orbitron';
    }
    
.clicked{
   border-color: #505050;
}    
#screen {
font-family: 'Orbitron';
font-size: 20px;
width: 165px;
border: solid 2px silver;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 4px 0 0 4px;
line-height: 30px;
height: 35px;
background-color: #ffffff;
}
#screen > span {
  display: inline-block;
  width: 16px;
  text-align: center;
  border:0;
  
}

JavaScript

$( function(){
tel=[];
pad=[1,2,3,4,5,6,7,8,9,0];

function shuffleKeypad(kpad){
$('.but').each( function(){ $(this).html(pad.pop());});
pad=[1,2,3,4,5,6,7,8,9,0];
}

$('.but').on( "click", function(){
  if(tel.length==10){ return false; }
	nr= Math.floor( Math.random()*10);
	tel.push( nr.toString());
	$('#screen').html( '<span>'+tel.join('</span><span>')+'</span>' );
  shuffleKeypad( pad.sort(function (a, b) { return 0.5 - Math.random(); }))
})


$('.del').on( "click", function(){
	tel.pop();
  $('#screen').html( '<span>'+tel.join('</span><span>')+'</span>'  );
  })

$('.clr').on( "click", function(){
	shuffleKeypad( pad.reverse() );
  tel=[];
  $('#screen').html('');
  });
  
$('.but, .del, .clr').on('mousedown', function(){ $(this).addClass('clicked')})
.on("mouseout mouseup", function(){ $(this).removeClass('clicked');});

});