JSFiddle - React, Tailwind, and code Playground

by rikazavr

HTML

<div class="buttons-center">
    <div class="wrapper-buttons" >
                
                 <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" style="color: red">C</button>
             <button class="buttons-keyboard">0</button>
             <button class="buttons-keyboard"><img src="https://i.ibb.co/rpw4ZRh/deletewhite.png" alt="deleteimg" border="0" class="imglight"/></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;
		   transition: all ease 0.3s;
       font-size: 200%; 
		   color: black;
		   max-height: 60px;
       display: flex;
       justify-content: center;
       }
	
.imglight {  height: 55%; display: block;}

	
.buttons-keyboard:active { box-shadow: 0 3px 0 #DCDCDC;
                           top: 3px;}
				  
.wrapper-buttons { width: 100%; 
                   max-width: 800px;
				           display: flex;
			         	   flex-flow: row wrap;
			        	   justify-content: center;
				           align-items: flex-end;
				           position: absolute;
				           bottom: 60px;
                   }

.buttons-center { display: flex; 
                  justify-content: center;
				          width: 100%}