JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper-buttons">
         <div>
                
                 <button class="buttons-keyboard">
                    1
                 </button>
				         <button class="buttons-keyboard">
                    2
                 </button>
                 <button class="buttons-keyboard">
                    3
                 </button>    
				 <br/>
				         <button class="buttons-keyboard">
                   4
                 </button>
				          <button class="buttons-keyboard">
                   5
                 </button>
                  <button class="buttons-keyboard">
                   6
                 </button>
            
				 <br/>
				 
				         <button class="buttons-keyboard">
                    7
                 </button>
				         <button class="buttons-keyboard">
                    8
                 </button>
				         <button class="buttons-keyboard">
                    9
                 </button>
                 
		      <br/>
			     
		         <button class="buttons-keyboard">0</button>
		         <button class="buttons-keyboard"><img src="https://i.ibb.co/xStC0pX/delete.png" alt="delete" border="0"/></button>
		         <button class="buttons-keyboard" style="color: red">C</button>
        </div>
	</div>

CSS

body {background: grey}

.buttons-keyboard {
	      margin: 1.2%; 
          background: white;
          border-radius: 10px 10px 10px 10px;
          outline: none;
          border: none; 
          width: 30%;  
          height: 8.5vh;
          box-shadow: 2px 4px 2px #C0C0C0;
          position: relative;
          transition: all ease 0.3s;
          font-size: calc(3.4vh + 2.8vw); 
		  color: black;
		  max-height: 65px;
	  	  }
	
img { height: 40px; }
	
.buttons-keyboard:active { box-shadow: 0 3px 0 #DCDCDC;
                           top: 3px;}
				  
.wrapper-buttons { bottom: 55px;
                   position: fixed;
		           width: 100%; 
		           text-align: center;
                   }